multiselect.js

/*
 * jQuery UI Multiselect
 *
 * Copyright (c) 2008 Michael Aufreiter (ma.zive.at)
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 * 
 * http://tobeannounced
 *
 * Depends:
 *	ui.core.js
 *	ui.sortable.js
 */
 
(function($) {

$.widget("ui.multiselect", {
  _init: function() {
		// hide this.element
		this.element.hide();
		this.id = this.element.attr("id");
		this.container = $("<div class='"+this.options.className+"'>").insertAfter(this.element);
		
		this.selectedList = $("<ul class='selected'></ul>").appendTo(this.container);
		this.availableList = $("<ul class='available'></ul>").appendTo(this.container); //.hide();
		
		var that = this;
		
		
		$("<div class='clear'></div>").appendTo(this.container); // needed?
		
		// set dimensions
		this.selectedList.width(this.element.width());
		this.availableList.width(this.element.width()*0.6);
		this.selectedList.height(this.element.height());
		this.availableList.height(this.element.height());
		
		this.populateLists();		
		
		// register events
		this.registerAddEvents(this.availableList.find('a.action'));
		this.registerRemoveEvents(this.selectedList.find('a.action'));
				
		// make current selection sortable
		$(this.selectedList).sortable({
		  containment: 'parent',
		  update: function(event, ui) {
		    // apply the new sort order to the original selectbox
		    that.selectedList.find('li').each(function() {
		      if (this.optionLink) $(this.optionLink).remove().appendTo(that.element);
		    });
		  }
		});
  },
  populateLists: function() {
    this.selectedList.empty();
    this.availableList.empty();
    
    var that = this;
    this.element.find('option').each(function(i) {
      var item = $("<li><a href='#'>"+$(this).text()+"</a><a href='#' class='action'><span>*</span></a><div class='clear'></div></li>").appendTo(that.availableList);
      item.appendTo(this.selected ? that.selectedList : that.availableList);

      // store the index as a property
      item[0].optionLink = this;
    });
  },
  registerAddEvents: function(elements) {
    var that = this;
    elements.click(function() {
      // select the corresponding option
      option = $(this).parent()[0].optionLink;
      option.selected = true;
      $(option).remove().appendTo(that.element);
      
      // move element to selectedList and reregister events
      $(this).parent().remove().appendTo(that.selectedList);
      that.registerRemoveEvents($(this));
    });
  },
  registerRemoveEvents: function(elements) {
    var that = this;
    elements.click(function() {
      // deselect the corresponding option
      $(this).parent()[0].optionLink.selected = false;
      // move element to availableList and reregister events
      $(this).parent().remove().appendTo(that.availableList);
      that.registerAddEvents($(this));
    });
  }
});

// default options
$.ui.multiselect.defaults = {
  className: "multiselect"
};

})(jQuery);