diff --git a/css/ui.multiselect.css b/css/ui.multiselect.css index 8ab18ef..1cee49e 100644 --- a/css/ui.multiselect.css +++ b/css/ui.multiselect.css @@ -1,17 +1,17 @@ /* Multiselect ----------------------------------*/ -.ui-multiselect { border: solid 1px; font-size: 0.8em; } +.ui-multiselect { border: solid 1px; font-size: 0.8em; width:100% !important; overflow-x: hidden; overflow-y: auto; } .ui-multiselect ul { -moz-user-select: none; } .ui-multiselect li { margin: 0; padding: 0; cursor: default; line-height: 20px; height: 20px; font-size: 11px; list-style: none; } .ui-multiselect li a { color: #999; text-decoration: none; padding: 0; display: block; float: left; cursor: pointer;} .ui-multiselect li.ui-draggable-dragging { padding-left: 10px; } -.ui-multiselect div.selected { position: relative; padding: 0; margin: 0; border: 0; float:left; } +.ui-multiselect div.selected { position: relative; padding: 0; margin: 0; border: 0; float:left; width: 49.5%; } .ui-multiselect ul.selected { position: relative; padding: 0; overflow: auto; overflow-x: hidden; background: #fff; margin: 0; list-style: none; border: 0; position: relative; width: 100%; } .ui-multiselect ul.selected li { } -.ui-multiselect div.available { position: relative; padding: 0; margin: 0; border: 0; float:left; border-left: 1px solid; } +.ui-multiselect div.available { position: relative; padding: 0; margin: 0; border: 0; float:left; border-left: 1px solid; width: 49.5%; } .ui-multiselect ul.available { position: relative; padding: 0; overflow: auto; overflow-x: hidden; background: #fff; margin: 0; list-style: none; border: 0; width: 100%; } .ui-multiselect ul.available li { padding-left: 10px; } @@ -27,4 +27,4 @@ .ui-multiselect li span.ui-icon-arrowthick-2-n-s { position: absolute; left: 2px; } .ui-multiselect li a.action { position: absolute; right: 2px; top: 2px; } -.ui-multiselect input.search { height: 14px; padding: 1px; opacity: 0.5; margin: 4px; width: 100px; } \ No newline at end of file +.ui-multiselect input.search { height: 14px; padding: 1px; opacity: 0.5; margin: 4px; width: 100px; } diff --git a/js/ui.multiselect.js b/js/ui.multiselect.js index 3f653d8..e9c51e9 100755 --- a/js/ui.multiselect.js +++ b/js/ui.multiselect.js @@ -1,342 +1,705 @@ +/* jshint forin:true, noarg:true, noempty:true, eqeqeq:true, boss:true, undef:true, curly:true, browser:true, jquery:true */ /* - * jQuery UI Multiselect + * jQuery MultiSelect UI Widget 1.13 + * Copyright (c) 2012 Eric Hynds * - * Authors: - * Michael Aufreiter (quasipartikel.at) - * Yanick Rochon (yanick.rochon[at]gmail[dot]com) - * - * Dual licensed under the MIT (MIT-LICENSE.txt) - * and GPL (GPL-LICENSE.txt) licenses. - * - * http://www.quasipartikel.at/multiselect/ + * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ * - * * Depends: - * ui.core.js - * ui.sortable.js + * - jQuery 1.4.2+ + * - jQuery UI 1.8 widget factory * * Optional: - * localization (http://plugins.jquery.com/project/localisation) - * scrollTo (http://plugins.jquery.com/project/ScrollTo) - * - * Todo: - * Make batch actions faster - * Implement dynamic insertion through remote calls - */ - - -(function($) { - -$.widget("ui.multiselect", { - options: { - sortable: true, - searchable: true, - doubleClickable: true, - animated: 'fast', - show: 'slideDown', - hide: 'slideUp', - dividerLocation: 0.6, - availableFirst: false, - nodeComparator: function(node1,node2) { - var text1 = node1.text(), - text2 = node2.text(); - return text1 == text2 ? 0 : (text1 < text2 ? -1 : 1); - } - }, - _create: function() { - this.element.hide(); - this.id = this.element.attr("id"); - this.container = $('
').insertAfter(this.element); - this.count = 0; // number of currently selected options - this.selectedContainer = $('
').appendTo(this.container); - this.availableContainer = $('
')[this.options.availableFirst?'prependTo': 'appendTo'](this.container); - this.selectedActions = $('
0 '+$.ui.multiselect.locale.itemsCount+''+$.ui.multiselect.locale.removeAll+'
').appendTo(this.selectedContainer); - this.availableActions = $('
'+$.ui.multiselect.locale.addAll+'
').appendTo(this.availableContainer); - this.selectedList = $('').bind('selectstart', function(){return false;}).appendTo(this.selectedContainer); - this.availableList = $('').bind('selectstart', function(){return false;}).appendTo(this.availableContainer); - - var that = this; - - // set dimensions - this.container.width(this.element.width()+1); - this.selectedContainer.width(Math.floor(this.element.width()*this.options.dividerLocation)); - this.availableContainer.width(Math.floor(this.element.width()*(1-this.options.dividerLocation))); - - // fix list height to match