--- /dev/null
+.ms-options-wrap,
+.ms-options-wrap * {
+ box-sizing: border-box;
+}
+
+.ms-options-wrap > button:focus,
+.ms-options-wrap > button {
+ position: relative;
+ width: 100%;
+ text-align: left;
+ border: 1px solid #aaa;
+ background-color: #fff;
+ padding: 5px 20px 5px 5px;
+ margin-top: 1px;
+ font-size: 13px;
+ color: #aaa;
+ outline: none;
+ white-space: nowrap;
+}
+
+.ms-options-wrap > button:after {
+ content: ' ';
+ height: 0;
+ position: absolute;
+ top: 50%;
+ right: 5px;
+ width: 0;
+ border: 6px solid rgba(0, 0, 0, 0);
+ border-top-color: #999;
+ margin-top: -3px;
+}
+
+.ms-options-wrap > .ms-options {
+ position: absolute;
+ left: 0;
+ width: 100%;
+ margin-top: 1px;
+ margin-bottom: 20px;
+ background: white;
+ z-index: 2000;
+ border: 1px solid #aaa;
+}
+
+.ms-options-wrap > .ms-options > .ms-search input {
+ width: 100%;
+ padding: 4px 5px;
+ border: none;
+ border-bottom: 1px groove;
+ outline: none;
+}
+
+.ms-options-wrap > .ms-options .ms-selectall {
+ display: inline-block;
+ font-size: .9em;
+ text-transform: lowercase;
+ text-decoration: none;
+}
+.ms-options-wrap > .ms-options .ms-selectall:hover {
+ text-decoration: underline;
+}
+
+.ms-options-wrap > .ms-options > .ms-selectall.global {
+ margin: 4px 5px;
+}
+
+.ms-options-wrap > .ms-options > ul {
+ line-height: .2em;
+}
+
+.ms-options-wrap > .ms-options > ul > li.optgroup {
+ padding: 5px;
+}
+.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
+ border-top: 1px solid #aaa;
+}
+
+.ms-options-wrap > .ms-options > ul > li.optgroup .label {
+ display: block;
+ padding: 5px 0 0 0;
+ font-weight: bold;
+}
+
+.ms-options-wrap > .ms-options > ul label {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ padding: 4px;
+ margin: 1px 0;
+}
+
+.ms-options-wrap > .ms-options > ul li.selected label,
+.ms-options-wrap > .ms-options > ul label:hover {
+ background-color: #efefef;
+}
+
+.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
+ margin-right: 5px;
+ position: absolute;
+ left: 4px;
+/* top: 7px; */
+}
\ No newline at end of file
--- /dev/null
+/**
+ * Display a nice easy to use multiselect list
+ * @Version: 2.0
+ * @Author: Patrick Springstubbe
+ * @Contact: @JediNobleclem
+ * @Website: springstubbe.us
+ * @Source: https://github.com/nobleclem/jQuery-MultiSelect
+ * @Notes: If select list is hidden on page load use the jquery.actual plugin
+ * to resolve issues with preselected items placeholder text
+ * https://github.com/dreamerslab/jquery.actual
+ *
+ * Usage:
+ * $('select[multiple]').multiselect();
+ * $('select[multiple]').multiselect({ placeholder: 'Select options' });
+ * $('select[multiple]').multiselect('reload');
+ * $('select[multiple]').multiselect( 'loadOption', [{
+ * name : 'Option Name 1',
+ * value : 'option-value-1',
+ * checked: false
+ * },{
+ * name : 'Option Name 2',
+ * value : 'option-value-2',
+ * checked: false
+ * }]);
+ *
+ **/
+(function($){
+ var defaults = {
+ placeholder : 'Select options', // text to use in dummy input
+ columns : 1, // how many columns should be use to show options
+ search : false, // include option search box
+ // search filter options
+ searchOptions : {
+ 'default' : 'Search', // search input placeholder text
+ showOptGroups: false, // show option group titles if no options remaining
+ onSearch : function( element ){} // fires on keyup before search on options happens
+ },
+ selectAll : false, // add select all option
+ selectGroup : false, // select entire optgroup
+ minHeight : 200, // minimum height of option overlay
+ maxHeight : null, // maximum height of option overlay
+ showCheckbox : true, // display the checkbox to the user
+ jqActualOpts : {}, // options for jquery.actual
+
+ // Callbacks
+ onLoad : function( element ) { // fires at end of list initialization
+ $(element).hide();
+ },
+ onOptionClick : function( element, option ){}, // fires when an option is clicked
+
+ // @NOTE: these are for future development
+ maxWidth : null, // maximum width of option overlay (or selector)
+ minSelect : false, // minimum number of items that can be selected
+ maxSelect : false, // maximum number of items that can be selected
+ };
+
+ var msCounter = 1;
+ var placeWidth = 0;
+
+ function MultiSelect( element, options )
+ {
+ this.element = element;
+ this.options = $.extend( {}, defaults, options );
+ this.load();
+ }
+
+ MultiSelect.prototype = {
+ /* LOAD CUSTOM MULTISELECT DOM/ACTIONS */
+ load: function() {
+ var instance = this;
+
+ // make sure this is a select list and not loaded
+ if( (instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded') ) {
+ return true;
+ }
+
+ // sanity check so we don't double load on a select element
+ $(instance.element).addClass('jqmsLoaded');
+
+ // add option container
+ $(instance.element).after('<div class="ms-options-wrap"><button>None Selected</button><div class="ms-options"><ul></ul></div></div>');
+ var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
+ var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
+ var optionsList = optionsWrap.find('> ul');
+ var hasOptGroup = $(instance.element).find('optgroup').length ? true : false;
+
+ var maxWidth = null;
+ if( typeof instance.options.width == 'number' ) {
+ optionsWrap.parent().css( 'position', 'relative' );
+ maxWidth = instance.options.width;
+ }
+ else if( typeof instance.options.width == 'string' ) {
+ $( instance.options.width ).css( 'position', 'relative' );
+ maxWidth = '100%';
+ }
+ else {
+ optionsWrap.parent().css( 'position', 'relative' );
+ }
+
+ var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
+ if( instance.options.maxHeight ) {
+ maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
+ maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
+ }
+
+ maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
+
+ optionsWrap.css({
+ maxWidth : maxWidth,
+ minHeight: instance.options.minHeight,
+ maxHeight: maxHeight,
+ overflow : 'auto'
+ }).hide();
+
+ // isolate options scroll
+ // @source: https://github.com/nobleclem/jQuery-IsolatedScroll
+ optionsWrap.bind( 'touchmove mousewheel DOMMouseScroll', function ( e ) {
+ if( ($(this).outerHeight() < $(this)[0].scrollHeight) ) {
+ var e0 = e.originalEvent,
+ delta = e0.wheelDelta || -e0.detail;
+
+ if( ($(this).outerHeight() + $(this)[0].scrollTop) > $(this)[0].scrollHeight ) {
+ e.preventDefault();
+ this.scrollTop += ( delta < 0 ? 1 : -1 );
+ }
+ }
+ });
+
+ // hide options menus if click happens off of the list placeholder button
+ $(document).off('click.ms-hideopts').on('click.ms-hideopts', function( event ){
+ if( !$(event.target).closest('.ms-options-wrap').length ) {
+ $('.ms-options-wrap > .ms-options:visible').hide();
+ }
+ });
+
+ // disable button action
+ placeholder.bind('mousedown',function( event ){
+ // ignore if its not a left click
+ if( event.which != 1 ) {
+ return true;
+ }
+
+ // hide other menus before showing this one
+ $('.ms-options-wrap > .ms-options:visible').each(function(){
+ if( $(this).parent().prev()[0] != optionsWrap.parent().prev()[0] ) {
+ $(this).hide();
+ }
+ });
+
+ // show/hide options
+ optionsWrap.toggle();
+
+ // recalculate height
+ if( optionsWrap.is(':visible') ) {
+ optionsWrap.css( 'maxHeight', '' );
+
+ var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
+ if( instance.options.maxHeight ) {
+ maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
+ maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
+ }
+ maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
+
+ optionsWrap.css( 'maxHeight', maxHeight );
+ }
+ }).click(function( event ){ event.preventDefault(); });
+
+ // add placeholder copy
+ if( instance.options.placeholder ) {
+ placeholder.text( instance.options.placeholder );
+ }
+
+ // add search box
+ if( instance.options.search ) {
+ optionsList.before('<div class="ms-search"><input type="text" value="" placeholder="'+ instance.options.searchOptions['default'] +'" /></div>');
+
+ var search = optionsWrap.find('.ms-search input');
+ search.on('keyup', function(){
+ // ignore keystrokes that don't make a difference
+ if( $(this).data('lastsearch') == $(this).val() ) {
+ return true;
+ }
+
+ $(this).data('lastsearch', $(this).val() );
+
+ // USER CALLBACK
+ if( typeof instance.options.searchOptions.onSearch == 'function' ) {
+ instance.options.searchOptions.onSearch( instance.element );
+ }
+
+ // search non optgroup li's
+ optionsList.find('li:not(.optgroup)').each(function(){
+ var optText = $(this).text();
+
+ // show option if string exists
+ if( optText.toLowerCase().indexOf( search.val().toLowerCase() ) > -1 ) {
+ $(this).show();
+ }
+ // don't hide selected items
+ else if( !$(this).hasClass('selected') ) {
+ $(this).hide();
+ }
+
+ // hide / show optgroups depending on if options within it are visible
+ if( !instance.options.searchOptions.showOptGroups && $(this).closest('li.optgroup') ) {
+ $(this).closest('li.optgroup').show();
+
+ if( $(this).closest('li.optgroup').find('li:visible').length ) {
+ $(this).closest('li.optgroup').show();
+ }
+ else {
+ $(this).closest('li.optgroup').hide();
+ }
+ }
+ });
+ });
+ }
+
+ // add global select all options
+ if( instance.options.selectAll ) {
+ optionsList.before('<a href="#" class="ms-selectall global">Select all/none</a>');
+ }
+
+ // handle select all option
+ optionsWrap.on('click', '.ms-selectall', function( event ){
+ event.preventDefault();
+
+ if( $(this).hasClass('global') ) {
+ // check if any selected if so then select them
+ if( optionsList.find('li:not(.optgroup)').filter(':not(.selected)').length ) {
+ optionsList.find('li:not(.optgroup)').filter(':not(.selected)').find('input[type="checkbox"]').trigger('click');
+ }
+ // deselect everything
+ else {
+ optionsList.find('li:not(.optgroup).selected input[type="checkbox"]').trigger('click');
+ }
+ }
+ else if( $(this).closest('li').hasClass('optgroup') ) {
+ var optgroup = $(this).closest('li.optgroup');
+
+ // check if any selected if so then select them
+ if( optgroup.find('li:not(.selected)').length ) {
+ optgroup.find('li:not(.selected) input[type="checkbox"]').trigger('click');
+ }
+ // deselect everything
+ else {
+ optgroup.find('li.selected input[type="checkbox"]').trigger('click');
+ }
+ }
+ });
+
+ // add options to wrapper
+ var options = [];
+ $(instance.element).children().each(function(){
+ if( this.nodeName == 'OPTGROUP' ) {
+ var groupOptions = [];
+
+ $(this).children('option').each(function(){
+ groupOptions[ $(this).val() ] = {
+ name : $(this).text(),
+ value : $(this).val(),
+ checked: $(this).prop( 'selected' )
+ };
+ });
+
+ options.push({
+ label : $(this).attr('label'),
+ options: groupOptions
+ });
+ }
+ else if( this.nodeName == 'OPTION' ) {
+ options.push({
+ name : $(this).text(),
+ value : $(this).val(),
+ checked: $(this).prop( 'selected' )
+ });
+ }
+ else {
+ // bad option
+ return true;
+ }
+ });
+ instance.loadOptions( options );
+
+ // COLUMNIZE
+ if( hasOptGroup ) {
+ // float non grouped options
+ optionsList.find('> li:not(.optgroup)').css({
+ float: 'left',
+ width: (100 / instance.options.columns) +'%'
+ });
+
+ // add CSS3 column styles
+ optionsList.find('li.optgroup').css({
+ clear: 'both'
+ }).find('> ul').css({
+ 'column-count' : instance.options.columns,
+ 'column-gap' : 0,
+ '-webkit-column-count': instance.options.columns,
+ '-webkit-column-gap' : 0,
+ '-moz-column-count' : instance.options.columns,
+ '-moz-column-gap' : 0
+ });
+
+ // for crappy IE versions float grouped options
+ if( this._ieVersion() && (this._ieVersion() < 10) ) {
+ optionsList.find('li.optgroup > ul > li').css({
+ float: 'left',
+ width: (100 / instance.options.columns) +'%'
+ });
+ }
+ }
+ else {
+ // add CSS3 column styles
+ optionsList.css({
+ 'column-count' : instance.options.columns,
+ 'column-gap' : 0,
+ '-webkit-column-count': instance.options.columns,
+ '-webkit-column-gap' : 0,
+ '-moz-column-count' : instance.options.columns,
+ '-moz-column-gap' : 0
+ });
+
+ // for crappy IE versions float grouped options
+ if( this._ieVersion() && (this._ieVersion() < 10) ) {
+ optionsList.find('> li').css({
+ float: 'left',
+ width: (100 / instance.options.columns) +'%'
+ });
+ }
+ }
+
+ // BIND SELECT ACTION
+ optionsWrap.on( 'click', 'input[type="checkbox"]', function(){
+ $(this).closest( 'li' ).toggleClass( 'selected' );
+
+ var select = optionsWrap.parent().prev();
+
+ // toggle clicked option
+ select.find('option[value="'+ $(this).val() +'"]').prop(
+ 'selected', $(this).is(':checked')
+ ).closest('select').trigger('change');
+
+ if( typeof instance.options.onOptionClick == 'function' ) {
+ instance.options.onOptionClick();
+ }
+
+ instance._updatePlaceholderText();
+ });
+
+ // hide native select list
+ if( typeof instance.options.onLoad === 'function' ) {
+ instance.options.onLoad( instance.element );
+ }
+ else {
+ $(instance.element).hide();
+ }
+ },
+
+ /* LOAD SELECT OPTIONS */
+ loadOptions: function( options, overwrite ) {
+ overwrite = (typeof overwrite == 'boolean') ? overwrite : true;
+
+ var instance = this;
+ var optionsList = $(instance.element).next('.ms-options-wrap').find('> .ms-options > ul');
+
+ if( overwrite ) {
+ optionsList.find('> li').remove();
+ }
+
+ for( var key in options ) {
+ var thisOption = options[ key ];
+ var container = $('<li></li>');
+
+ // optgroup
+ if( thisOption.hasOwnProperty('options') ) {
+ container.addClass('optgroup');
+ container.append('<span class="label">'+ thisOption.label +'</span>');
+ container.find('> .label').css({
+ clear: 'both'
+ });
+
+ if( instance.options.selectGroup ) {
+ container.append('<a href="#" class="ms-selectall">Select all</a>')
+ }
+
+ container.append('<ul></ul>');
+
+ for( var gKey in thisOption.options ) {
+ var thisGOption = thisOption.options[ gKey ];
+ var gContainer = $('<li></li>').addClass('ms-reflow');
+
+ instance._addOption( gContainer, thisGOption );
+
+ container.find('> ul').append( gContainer );
+ }
+ }
+ // option
+ else if( thisOption.hasOwnProperty('value') ) {
+ container.addClass('ms-reflow')
+
+ instance._addOption( container, thisOption );
+ }
+
+ optionsList.append( container );
+ }
+
+ optionsList.find('.ms-reflow input[type="checkbox"]').each(function( idx ){
+ if( $(this).css('display').match(/block$/) ) {
+ var checkboxWidth = $(this).outerWidth();
+ checkboxWidth = checkboxWidth ? checkboxWidth : 15;
+
+ $(this).closest('label').css(
+ 'padding-left',
+ (parseInt( $(this).closest('label').css('padding-left') ) * 2) + checkboxWidth
+ );
+
+ $(this).closest('.ms-reflow').removeClass('ms-reflow');
+ }
+ });
+
+ instance._updatePlaceholderText();
+ },
+
+ /* RESET THE DOM */
+ unload: function() {
+ $(this.element).next('.ms-options-wrap').remove();
+ $(this.element).show(function(){
+ $(this).css('display','').removeClass('jqmsLoaded');
+ });
+ },
+
+ /* RELOAD JQ MULTISELECT LIST */
+ reload: function() {
+ // remove existing options
+ $(this.element).next('.ms-options-wrap').remove();
+ $(this.element).removeClass('jqmsLoaded');
+
+ // load element
+ this.load();
+ },
+
+ /** PRIVATE FUNCTIONS **/
+ // update selected placeholder text
+ _updatePlaceholderText: function(){
+ var instance = this;
+ var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
+ var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
+ var select = optionsWrap.parent().prev();
+
+ // get selected options
+ var selOpts = [];
+ select.find('option:selected').each(function(){
+ selOpts.push( $(this).text() );
+ });
+
+ // UPDATE PLACEHOLDER TEXT WITH OPTIONS SELECTED
+ placeholder.text( selOpts.join( ', ' ) );
+ var copy = placeholder.clone().css({
+ display : 'inline',
+ width : 'auto',
+ visibility: 'hidden'
+ }).appendTo( optionsWrap.parent() );
+
+ // if the jquery.actual plugin is loaded use it to get the widths
+ var copyWidth = (typeof $.fn.actual !== 'undefined') ? copy.actual( 'width', instance.options.jqActualOpts ) : copy.width();
+// var placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual( 'width', instance.options.jqActualOpts ) : placeholder.width();
+
+ // Hacked placeWidth to function for me - CPS
+ if (placeWidth == 0) {
+ placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual( 'width', instance.options.jqActualOpts ) : placeholder.width();
+ if (instance.options.maxWidth < placeWidth) {
+ placeWidth = instance.options.maxWidth;
+ }
+ }
+
+ // if copy is larger than button width use "# selected"
+ if( copyWidth > placeWidth ) {
+ placeholder.text( selOpts.length +' selected' );
+ }
+ // if options selected then use those
+ else if( selOpts.length ) {
+ placeholder.text( selOpts.join( ', ' ) );
+ }
+ // replace placeholder text
+ else {
+ placeholder.text( instance.options.placeholder );
+ }
+
+ // remove dummy element
+ copy.remove();
+ },
+
+ // Add option to the custom dom list
+ _addOption: function( container, option ) {
+ container.text( option.name );
+ container.prepend(
+ $('<input type="checkbox" value="" title="" />')
+ .val( option.value )
+ .attr( 'title', option.name )
+ .attr( 'id', 'ms-opt-'+ msCounter )
+ );
+
+ if( option.checked ) {
+ container.addClass('default');
+ container.addClass('selected');
+ container.find( 'input[type="checkbox"]' ).prop( 'checked', true );
+ }
+
+ var label = $('<label></label>').attr( 'for', 'ms-opt-'+ msCounter );
+ container.wrapInner( label );
+
+
+ if( !this.options.showCheckbox ) {
+ container.find('input[id="ms-opt-'+ msCounter +'"]').hide();
+ }
+
+ msCounter = msCounter + 1;
+ },
+
+ // check ie version
+ _ieVersion: function() {
+ var myNav = navigator.userAgent.toLowerCase();
+ return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
+ }
+ };
+
+ // ENABLE JQUERY PLUGIN FUNCTION
+ $.fn.multiselect = function( options ){
+ var args = arguments;
+ var ret;
+
+ // menuize each list
+ if( (options === undefined) || (typeof options === 'object') ) {
+ return this.each(function(){
+ if( !$.data( this, 'plugin_multiselect' ) ) {
+ $.data( this, 'plugin_multiselect', new MultiSelect( this, options ) );
+ }
+ });
+ } else if( (typeof options === 'string') && (options[0] !== '_') && (options !== 'init') ) {
+ this.each(function(){
+ var instance = $.data( this, 'plugin_multiselect' );
+
+ if( instance instanceof MultiSelect && typeof instance[ options ] === 'function' ) {
+ ret = instance[ options ].apply( instance, Array.prototype.slice.call( args, 1 ) );
+ }
+
+ // special destruct handler
+ if( options === 'unload' ) {
+ $.data( this, 'plugin_multiselect', null );
+ }
+ });
+
+ return ret;
+ }
+ };
+}(jQuery));
\ No newline at end of file
-.ms-options-wrap,
-.ms-options-wrap * {
- box-sizing: border-box;
-}
-
-.ms-options-wrap > button:focus,
-.ms-options-wrap > button {
- position: relative;
- width: 100%;
- text-align: left;
- border: 1px solid #aaa;
- background-color: #fff;
- padding: 5px 20px 5px 5px;
- margin-top: 1px;
- font-size: 13px;
- color: #aaa;
- outline: none;
- white-space: nowrap;
-}
-
-.ms-options-wrap > button:after {
- content: ' ';
- height: 0;
- position: absolute;
- top: 50%;
- right: 5px;
- width: 0;
- border: 6px solid rgba(0, 0, 0, 0);
- border-top-color: #999;
- margin-top: -3px;
-}
-
-.ms-options-wrap > .ms-options {
- position: absolute;
- left: 0;
- width: 100%;
- margin-top: 1px;
- margin-bottom: 20px;
- background: white;
- z-index: 2000;
- border: 1px solid #aaa;
-}
-
-.ms-options-wrap > .ms-options > .ms-search input {
- width: 100%;
- padding: 4px 5px;
- border: none;
- border-bottom: 1px groove;
- outline: none;
-}
-
-.ms-options-wrap > .ms-options .ms-selectall {
- display: inline-block;
- font-size: .9em;
- text-transform: lowercase;
- text-decoration: none;
-}
-.ms-options-wrap > .ms-options .ms-selectall:hover {
- text-decoration: underline;
-}
-
-.ms-options-wrap > .ms-options > .ms-selectall.global {
- margin: 4px 5px;
-}
-
-.ms-options-wrap > .ms-options > ul {
- line-height: .2em;
-}
-
-.ms-options-wrap > .ms-options > ul > li.optgroup {
- padding: 5px;
-}
-.ms-options-wrap > .ms-options > ul > li.optgroup + li.optgroup {
- border-top: 1px solid #aaa;
-}
-
-.ms-options-wrap > .ms-options > ul > li.optgroup .label {
- display: block;
- padding: 5px 0 0 0;
- font-weight: bold;
-}
-
-.ms-options-wrap > .ms-options > ul label {
- position: relative;
- display: inline-block;
- width: 100%;
- padding: 4px;
- margin: 1px 0;
-}
-
-.ms-options-wrap > .ms-options > ul li.selected label,
-.ms-options-wrap > .ms-options > ul label:hover {
- background-color: #efefef;
-}
-
-.ms-options-wrap > .ms-options > ul input[type="checkbox"] {
- margin-right: 5px;
- position: absolute;
- left: 4px;
-/* top: 7px; */
-}
\ No newline at end of file
+.ui-multiselect { padding:2px 0 2px 4px; text-align:left }
+.ui-multiselect span.ui-icon { float:right }
+.ui-multiselect-single .ui-multiselect-checkboxes input { position:absolute !important; top: auto !important; left:-9999px; }
+.ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }
+
+.ui-multiselect-header { margin-bottom:3px; padding:3px 0 3px 4px }
+.ui-multiselect-header ul { font-size:0.9em }
+.ui-multiselect-header ul li { float:left; padding:0 10px 0 0 }
+.ui-multiselect-header a { text-decoration:none }
+.ui-multiselect-header a:hover { text-decoration:underline }
+.ui-multiselect-header span.ui-icon { float:left }
+.ui-multiselect-header li.ui-multiselect-close { float:right; text-align:right; padding-right:0 }
+
+.ui-multiselect-menu { display:none; padding:3px; position:absolute; z-index:10000; text-align: left }
+.ui-multiselect-checkboxes { position:relative /* fixes bug in IE6/7 */; overflow-y:scroll }
+.ui-multiselect-checkboxes label { cursor:default; display:block; border:1px solid transparent; padding:3px 1px }
+.ui-multiselect-checkboxes label input { position:relative; top:1px }
+.ui-multiselect-checkboxes li { clear:both; font-size:0.9em; padding-right:3px }
+.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label { text-align:center; font-weight:bold; border-bottom:1px solid }
+.ui-multiselect-checkboxes li.ui-multiselect-optgroup-label a { display:block; padding:3px; margin:1px 0; text-decoration:none }
+
+/* remove label borders in IE6 because IE6 does not support transparency */
+* html .ui-multiselect-checkboxes label { border:n
\ No newline at end of file
-/**
- * Display a nice easy to use multiselect list
- * @Version: 2.0
- * @Author: Patrick Springstubbe
- * @Contact: @JediNobleclem
- * @Website: springstubbe.us
- * @Source: https://github.com/nobleclem/jQuery-MultiSelect
- * @Notes: If select list is hidden on page load use the jquery.actual plugin
- * to resolve issues with preselected items placeholder text
- * https://github.com/dreamerslab/jquery.actual
+/*
+ * jQuery MultiSelect UI Widget 1.13
+ * Copyright (c) 2012 Eric Hynds
*
- * Usage:
- * $('select[multiple]').multiselect();
- * $('select[multiple]').multiselect({ placeholder: 'Select options' });
- * $('select[multiple]').multiselect('reload');
- * $('select[multiple]').multiselect( 'loadOption', [{
- * name : 'Option Name 1',
- * value : 'option-value-1',
- * checked: false
- * },{
- * name : 'Option Name 2',
- * value : 'option-value-2',
- * checked: false
- * }]);
+ * http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/
*
- **/
-(function($){
- var defaults = {
- placeholder : 'Select options', // text to use in dummy input
- columns : 1, // how many columns should be use to show options
- search : false, // include option search box
- // search filter options
- searchOptions : {
- 'default' : 'Search', // search input placeholder text
- showOptGroups: false, // show option group titles if no options remaining
- onSearch : function( element ){} // fires on keyup before search on options happens
- },
- selectAll : false, // add select all option
- selectGroup : false, // select entire optgroup
- minHeight : 200, // minimum height of option overlay
- maxHeight : null, // maximum height of option overlay
- showCheckbox : true, // display the checkbox to the user
- jqActualOpts : {}, // options for jquery.actual
-
- // Callbacks
- onLoad : function( element ) { // fires at end of list initialization
- $(element).hide();
- },
- onOptionClick : function( element, option ){}, // fires when an option is clicked
-
- // @NOTE: these are for future development
- maxWidth : null, // maximum width of option overlay (or selector)
- minSelect : false, // minimum number of items that can be selected
- maxSelect : false, // maximum number of items that can be selected
- };
-
- var msCounter = 1;
- var placeWidth = 0;
-
- function MultiSelect( element, options )
- {
- this.element = element;
- this.options = $.extend( {}, defaults, options );
- this.load();
- }
-
- MultiSelect.prototype = {
- /* LOAD CUSTOM MULTISELECT DOM/ACTIONS */
- load: function() {
- var instance = this;
-
- // make sure this is a select list and not loaded
- if( (instance.element.nodeName != 'SELECT') || $(instance.element).hasClass('jqmsLoaded') ) {
- return true;
- }
-
- // sanity check so we don't double load on a select element
- $(instance.element).addClass('jqmsLoaded');
-
- // add option container
- $(instance.element).after('<div class="ms-options-wrap"><button>None Selected</button><div class="ms-options"><ul></ul></div></div>');
- var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
- var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
- var optionsList = optionsWrap.find('> ul');
- var hasOptGroup = $(instance.element).find('optgroup').length ? true : false;
-
- var maxWidth = null;
- if( typeof instance.options.width == 'number' ) {
- optionsWrap.parent().css( 'position', 'relative' );
- maxWidth = instance.options.width;
- }
- else if( typeof instance.options.width == 'string' ) {
- $( instance.options.width ).css( 'position', 'relative' );
- maxWidth = '100%';
- }
- else {
- optionsWrap.parent().css( 'position', 'relative' );
- }
-
- var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
- if( instance.options.maxHeight ) {
- maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
- maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
- }
-
- maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
-
- optionsWrap.css({
- maxWidth : maxWidth,
- minHeight: instance.options.minHeight,
- maxHeight: maxHeight,
- overflow : 'auto'
- }).hide();
-
- // isolate options scroll
- // @source: https://github.com/nobleclem/jQuery-IsolatedScroll
- optionsWrap.bind( 'touchmove mousewheel DOMMouseScroll', function ( e ) {
- if( ($(this).outerHeight() < $(this)[0].scrollHeight) ) {
- var e0 = e.originalEvent,
- delta = e0.wheelDelta || -e0.detail;
-
- if( ($(this).outerHeight() + $(this)[0].scrollTop) > $(this)[0].scrollHeight ) {
- e.preventDefault();
- this.scrollTop += ( delta < 0 ? 1 : -1 );
- }
- }
- });
-
- // hide options menus if click happens off of the list placeholder button
- $(document).off('click.ms-hideopts').on('click.ms-hideopts', function( event ){
- if( !$(event.target).closest('.ms-options-wrap').length ) {
- $('.ms-options-wrap > .ms-options:visible').hide();
- }
- });
-
- // disable button action
- placeholder.bind('mousedown',function( event ){
- // ignore if its not a left click
- if( event.which != 1 ) {
- return true;
- }
-
- // hide other menus before showing this one
- $('.ms-options-wrap > .ms-options:visible').each(function(){
- if( $(this).parent().prev()[0] != optionsWrap.parent().prev()[0] ) {
- $(this).hide();
- }
- });
-
- // show/hide options
- optionsWrap.toggle();
-
- // recalculate height
- if( optionsWrap.is(':visible') ) {
- optionsWrap.css( 'maxHeight', '' );
-
- var maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
- if( instance.options.maxHeight ) {
- maxHeight = ($(window).height() - optionsWrap.offset().top - 20);
- maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxheight;
- }
- maxHeight = maxHeight < instance.options.minHeight ? instance.options.minHeight : maxHeight;
-
- optionsWrap.css( 'maxHeight', maxHeight );
- }
- }).click(function( event ){ event.preventDefault(); });
-
- // add placeholder copy
- if( instance.options.placeholder ) {
- placeholder.text( instance.options.placeholder );
- }
-
- // add search box
- if( instance.options.search ) {
- optionsList.before('<div class="ms-search"><input type="text" value="" placeholder="'+ instance.options.searchOptions['default'] +'" /></div>');
-
- var search = optionsWrap.find('.ms-search input');
- search.on('keyup', function(){
- // ignore keystrokes that don't make a difference
- if( $(this).data('lastsearch') == $(this).val() ) {
- return true;
- }
-
- $(this).data('lastsearch', $(this).val() );
-
- // USER CALLBACK
- if( typeof instance.options.searchOptions.onSearch == 'function' ) {
- instance.options.searchOptions.onSearch( instance.element );
- }
-
- // search non optgroup li's
- optionsList.find('li:not(.optgroup)').each(function(){
- var optText = $(this).text();
-
- // show option if string exists
- if( optText.toLowerCase().indexOf( search.val().toLowerCase() ) > -1 ) {
- $(this).show();
- }
- // don't hide selected items
- else if( !$(this).hasClass('selected') ) {
- $(this).hide();
- }
-
- // hide / show optgroups depending on if options within it are visible
- if( !instance.options.searchOptions.showOptGroups && $(this).closest('li.optgroup') ) {
- $(this).closest('li.optgroup').show();
-
- if( $(this).closest('li.optgroup').find('li:visible').length ) {
- $(this).closest('li.optgroup').show();
- }
- else {
- $(this).closest('li.optgroup').hide();
- }
- }
- });
- });
- }
-
- // add global select all options
- if( instance.options.selectAll ) {
- optionsList.before('<a href="#" class="ms-selectall global">Select all/none</a>');
- }
-
- // handle select all option
- optionsWrap.on('click', '.ms-selectall', function( event ){
- event.preventDefault();
-
- if( $(this).hasClass('global') ) {
- // check if any selected if so then select them
- if( optionsList.find('li:not(.optgroup)').filter(':not(.selected)').length ) {
- optionsList.find('li:not(.optgroup)').filter(':not(.selected)').find('input[type="checkbox"]').trigger('click');
- }
- // deselect everything
- else {
- optionsList.find('li:not(.optgroup).selected input[type="checkbox"]').trigger('click');
- }
- }
- else if( $(this).closest('li').hasClass('optgroup') ) {
- var optgroup = $(this).closest('li.optgroup');
-
- // check if any selected if so then select them
- if( optgroup.find('li:not(.selected)').length ) {
- optgroup.find('li:not(.selected) input[type="checkbox"]').trigger('click');
- }
- // deselect everything
- else {
- optgroup.find('li.selected input[type="checkbox"]').trigger('click');
- }
- }
- });
-
- // add options to wrapper
- var options = [];
- $(instance.element).children().each(function(){
- if( this.nodeName == 'OPTGROUP' ) {
- var groupOptions = [];
-
- $(this).children('option').each(function(){
- groupOptions[ $(this).val() ] = {
- name : $(this).text(),
- value : $(this).val(),
- checked: $(this).prop( 'selected' )
- };
- });
-
- options.push({
- label : $(this).attr('label'),
- options: groupOptions
- });
- }
- else if( this.nodeName == 'OPTION' ) {
- options.push({
- name : $(this).text(),
- value : $(this).val(),
- checked: $(this).prop( 'selected' )
- });
- }
- else {
- // bad option
- return true;
- }
- });
- instance.loadOptions( options );
-
- // COLUMNIZE
- if( hasOptGroup ) {
- // float non grouped options
- optionsList.find('> li:not(.optgroup)').css({
- float: 'left',
- width: (100 / instance.options.columns) +'%'
- });
-
- // add CSS3 column styles
- optionsList.find('li.optgroup').css({
- clear: 'both'
- }).find('> ul').css({
- 'column-count' : instance.options.columns,
- 'column-gap' : 0,
- '-webkit-column-count': instance.options.columns,
- '-webkit-column-gap' : 0,
- '-moz-column-count' : instance.options.columns,
- '-moz-column-gap' : 0
- });
-
- // for crappy IE versions float grouped options
- if( this._ieVersion() && (this._ieVersion() < 10) ) {
- optionsList.find('li.optgroup > ul > li').css({
- float: 'left',
- width: (100 / instance.options.columns) +'%'
- });
- }
- }
- else {
- // add CSS3 column styles
- optionsList.css({
- 'column-count' : instance.options.columns,
- 'column-gap' : 0,
- '-webkit-column-count': instance.options.columns,
- '-webkit-column-gap' : 0,
- '-moz-column-count' : instance.options.columns,
- '-moz-column-gap' : 0
- });
-
- // for crappy IE versions float grouped options
- if( this._ieVersion() && (this._ieVersion() < 10) ) {
- optionsList.find('> li').css({
- float: 'left',
- width: (100 / instance.options.columns) +'%'
- });
- }
- }
-
- // BIND SELECT ACTION
- optionsWrap.on( 'click', 'input[type="checkbox"]', function(){
- $(this).closest( 'li' ).toggleClass( 'selected' );
-
- var select = optionsWrap.parent().prev();
-
- // toggle clicked option
- select.find('option[value="'+ $(this).val() +'"]').prop(
- 'selected', $(this).is(':checked')
- ).closest('select').trigger('change');
-
- if( typeof instance.options.onOptionClick == 'function' ) {
- instance.options.onOptionClick();
- }
-
- instance._updatePlaceholderText();
- });
-
- // hide native select list
- if( typeof instance.options.onLoad === 'function' ) {
- instance.options.onLoad( instance.element );
- }
- else {
- $(instance.element).hide();
- }
- },
-
- /* LOAD SELECT OPTIONS */
- loadOptions: function( options, overwrite ) {
- overwrite = (typeof overwrite == 'boolean') ? overwrite : true;
-
- var instance = this;
- var optionsList = $(instance.element).next('.ms-options-wrap').find('> .ms-options > ul');
-
- if( overwrite ) {
- optionsList.find('> li').remove();
- }
-
- for( var key in options ) {
- var thisOption = options[ key ];
- var container = $('<li></li>');
-
- // optgroup
- if( thisOption.hasOwnProperty('options') ) {
- container.addClass('optgroup');
- container.append('<span class="label">'+ thisOption.label +'</span>');
- container.find('> .label').css({
- clear: 'both'
- });
-
- if( instance.options.selectGroup ) {
- container.append('<a href="#" class="ms-selectall">Select all</a>')
- }
-
- container.append('<ul></ul>');
-
- for( var gKey in thisOption.options ) {
- var thisGOption = thisOption.options[ gKey ];
- var gContainer = $('<li></li>').addClass('ms-reflow');
-
- instance._addOption( gContainer, thisGOption );
-
- container.find('> ul').append( gContainer );
- }
- }
- // option
- else if( thisOption.hasOwnProperty('value') ) {
- container.addClass('ms-reflow')
-
- instance._addOption( container, thisOption );
- }
-
- optionsList.append( container );
- }
-
- optionsList.find('.ms-reflow input[type="checkbox"]').each(function( idx ){
- if( $(this).css('display').match(/block$/) ) {
- var checkboxWidth = $(this).outerWidth();
- checkboxWidth = checkboxWidth ? checkboxWidth : 15;
-
- $(this).closest('label').css(
- 'padding-left',
- (parseInt( $(this).closest('label').css('padding-left') ) * 2) + checkboxWidth
- );
-
- $(this).closest('.ms-reflow').removeClass('ms-reflow');
- }
- });
-
- instance._updatePlaceholderText();
- },
-
- /* RESET THE DOM */
- unload: function() {
- $(this.element).next('.ms-options-wrap').remove();
- $(this.element).show(function(){
- $(this).css('display','').removeClass('jqmsLoaded');
- });
- },
-
- /* RELOAD JQ MULTISELECT LIST */
- reload: function() {
- // remove existing options
- $(this.element).next('.ms-options-wrap').remove();
- $(this.element).removeClass('jqmsLoaded');
-
- // load element
- this.load();
- },
-
- /** PRIVATE FUNCTIONS **/
- // update selected placeholder text
- _updatePlaceholderText: function(){
- var instance = this;
- var placeholder = $(instance.element).next('.ms-options-wrap').find('> button:first-child');
- var optionsWrap = $(instance.element).next('.ms-options-wrap').find('> .ms-options');
- var select = optionsWrap.parent().prev();
-
- // get selected options
- var selOpts = [];
- select.find('option:selected').each(function(){
- selOpts.push( $(this).text() );
- });
-
- // UPDATE PLACEHOLDER TEXT WITH OPTIONS SELECTED
- placeholder.text( selOpts.join( ', ' ) );
- var copy = placeholder.clone().css({
- display : 'inline',
- width : 'auto',
- visibility: 'hidden'
- }).appendTo( optionsWrap.parent() );
-
- // if the jquery.actual plugin is loaded use it to get the widths
- var copyWidth = (typeof $.fn.actual !== 'undefined') ? copy.actual( 'width', instance.options.jqActualOpts ) : copy.width();
-// var placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual( 'width', instance.options.jqActualOpts ) : placeholder.width();
-
- // Hacked placeWidth to function for me - CPS
- if (placeWidth == 0) {
- placeWidth = (typeof $.fn.actual !== 'undefined') ? placeholder.actual( 'width', instance.options.jqActualOpts ) : placeholder.width();
- if (instance.options.maxWidth < placeWidth) {
- placeWidth = instance.options.maxWidth;
- }
- }
-
- // if copy is larger than button width use "# selected"
- if( copyWidth > placeWidth ) {
- placeholder.text( selOpts.length +' selected' );
- }
- // if options selected then use those
- else if( selOpts.length ) {
- placeholder.text( selOpts.join( ', ' ) );
- }
- // replace placeholder text
- else {
- placeholder.text( instance.options.placeholder );
- }
-
- // remove dummy element
- copy.remove();
- },
-
- // Add option to the custom dom list
- _addOption: function( container, option ) {
- container.text( option.name );
- container.prepend(
- $('<input type="checkbox" value="" title="" />')
- .val( option.value )
- .attr( 'title', option.name )
- .attr( 'id', 'ms-opt-'+ msCounter )
- );
-
- if( option.checked ) {
- container.addClass('default');
- container.addClass('selected');
- container.find( 'input[type="checkbox"]' ).prop( 'checked', true );
- }
-
- var label = $('<label></label>').attr( 'for', 'ms-opt-'+ msCounter );
- container.wrapInner( label );
-
-
- if( !this.options.showCheckbox ) {
- container.find('input[id="ms-opt-'+ msCounter +'"]').hide();
- }
-
- msCounter = msCounter + 1;
- },
-
- // check ie version
- _ieVersion: function() {
- var myNav = navigator.userAgent.toLowerCase();
- return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
- }
- };
-
- // ENABLE JQUERY PLUGIN FUNCTION
- $.fn.multiselect = function( options ){
- var args = arguments;
- var ret;
-
- // menuize each list
- if( (options === undefined) || (typeof options === 'object') ) {
- return this.each(function(){
- if( !$.data( this, 'plugin_multiselect' ) ) {
- $.data( this, 'plugin_multiselect', new MultiSelect( this, options ) );
- }
- });
- } else if( (typeof options === 'string') && (options[0] !== '_') && (options !== 'init') ) {
- this.each(function(){
- var instance = $.data( this, 'plugin_multiselect' );
-
- if( instance instanceof MultiSelect && typeof instance[ options ] === 'function' ) {
- ret = instance[ options ].apply( instance, Array.prototype.slice.call( args, 1 ) );
- }
-
- // special destruct handler
- if( options === 'unload' ) {
- $.data( this, 'plugin_multiselect', null );
- }
- });
-
- return ret;
- }
- };
-}(jQuery));
\ No newline at end of file
+ * Depends:
+ * - jQuery 1.4.2+
+ * - jQuery UI 1.8 widget factory
+ *
+ * Optional:
+ * - jQuery UI effects
+ * - jQuery UI position utility
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+(function(d){var k=0;d.widget("ech.multiselect",{options:{header:!0,height:175,minWidth:225,classes:"",checkAllText:"Check all",uncheckAllText:"Uncheck all",noneSelectedText:"Select options",selectedText:"# selected",selectedList:0,show:null,hide:null,autoOpen:!1,multiple:!0,position:{}},_create:function(){var a=this.element.hide(),b=this.options;this.speed=d.fx.speeds._default;this._isOpen=!1;a=(this.button=d('<button type="button"><span class="ui-icon ui-icon-triangle-2-n-s"></span></button>')).addClass("ui-multiselect ui-widget ui-state-default ui-corner-all").addClass(b.classes).attr({title:a.attr("title"),"aria-haspopup":!0,tabIndex:a.attr("tabIndex")}).insertAfter(a);(this.buttonlabel=d("<span />")).html(b.noneSelectedText).appendTo(a);var a=(this.menu=d("<div />")).addClass("ui-multiselect-menu ui-widget ui-widget-content ui-corner-all").addClass(b.classes).appendTo(document.body),c=(this.header=d("<div />")).addClass("ui-widget-header ui-corner-all ui-multiselect-header ui-helper-clearfix").appendTo(a);(this.headerLinkContainer=d("<ul />")).addClass("ui-helper-reset").html(function(){return!0===b.header?'<li><a class="ui-multiselect-all" href="#"><span class="ui-icon ui-icon-check"></span><span>'+b.checkAllText+'</span></a></li><li><a class="ui-multiselect-none" href="#"><span class="ui-icon ui-icon-closethick"></span><span>'+b.uncheckAllText+"</span></a></li>":"string"===typeof b.header?"<li>"+b.header+"</li>":""}).append('<li class="ui-multiselect-close"><a href="#" class="ui-multiselect-close"><span class="ui-icon ui-icon-circle-close"></span></a></li>').appendTo(c);(this.checkboxContainer=d("<ul />")).addClass("ui-multiselect-checkboxes ui-helper-reset").appendTo(a);this._bindEvents();this.refresh(!0);b.multiple||a.addClass("ui-multiselect-single")},_init:function(){!1===this.options.header&&this.header.hide();this.options.multiple||this.headerLinkContainer.find(".ui-multiselect-all, .ui-multiselect-none").hide();this.options.autoOpen&&this.open();this.element.is(":disabled")&&this.disable()},refresh:function(a){var b=this.element,c=this.options,f=this.menu,h=this.checkboxContainer,g=[],e="",i=b.attr("id")||k++;b.find("option").each(function(b){d(this);var a=this.parentNode,f=this.innerHTML,h=this.title,k=this.value,b="ui-multiselect-"+(this.id||i+"-option-"+b),l=this.disabled,n=this.selected,m=["ui-corner-all"],o=(l?"ui-multiselect-disabled ":" ")+this.className,j;"OPTGROUP"===a.tagName&&(j=a.getAttribute("label"),-1===d.inArray(j,g)&&(e+='<li class="ui-multiselect-optgroup-label '+a.className+'"><a href="#">'+j+"</a></li>",g.push(j)));l&&m.push("ui-state-disabled");n&&!c.multiple&&m.push("ui-state-active");e+='<li class="'+o+'">';e+='<label for="'+b+'" title="'+h+'" class="'+m.join(" ")+'">';e+='<input id="'+b+'" name="multiselect_'+i+'" type="'+(c.multiple?"checkbox":"radio")+'" value="'+k+'" title="'+f+'"';n&&(e+=' checked="checked"',e+=' aria-selected="true"');l&&(e+=' disabled="disabled"',e+=' aria-disabled="true"');e+=" /><span>"+f+"</span></label></li>"});h.html(e);this.labels=f.find("label");this.inputs=this.labels.children("input");this._setButtonWidth();this._setMenuWidth();this.button[0].defaultValue=this.update();a||this._trigger("refresh")},update:function(){var a=this.options,b=this.inputs,c=b.filter(":checked"),f=c.length,a=0===f?a.noneSelectedText:d.isFunction(a.selectedText)?a.selectedText.call(this,f,b.length,c.get()):/\d/.test(a.selectedList)&&0<a.selectedList&&f<=a.selectedList?c.map(function(){return d(this).next().html()}).get().join(", "):a.selectedText.replace("#",f).replace("#",b.length);this.buttonlabel.html(a);return a},_bindEvents:function(){function a(){b[b._isOpen? "close":"open"]();return!1}var b=this,c=this.button;c.find("span").bind("click.multiselect",a);c.bind({click:a,keypress:function(a){switch(a.which){case 27:case 38:case 37:b.close();break;case 39:case 40:b.open()}},mouseenter:function(){c.hasClass("ui-state-disabled")||d(this).addClass("ui-state-hover")},mouseleave:function(){d(this).removeClass("ui-state-hover")},focus:function(){c.hasClass("ui-state-disabled")||d(this).addClass("ui-state-focus")},blur:function(){d(this).removeClass("ui-state-focus")}});this.header.delegate("a","click.multiselect",function(a){if(d(this).hasClass("ui-multiselect-close"))b.close();else b[d(this).hasClass("ui-multiselect-all")?"checkAll":"uncheckAll"]();a.preventDefault()});this.menu.delegate("li.ui-multiselect-optgroup-label a","click.multiselect",function(a){a.preventDefault();var c=d(this),g=c.parent().nextUntil("li.ui-multiselect-optgroup-label").find("input:visible:not(:disabled)"),e=g.get(),c=c.parent().text();!1!==b._trigger("beforeoptgrouptoggle",a,{inputs:e,label:c})&&(b._toggleChecked(g.filter(":checked").length!==g.length,g),b._trigger("optgrouptoggle",a,{inputs:e,label:c,checked:e[0].checked}))}).delegate("label","mouseenter.multiselect",function(){d(this).hasClass("ui-state-disabled")||(b.labels.removeClass("ui-state-hover"),d(this).addClass("ui-state-hover").find("input").focus())}).delegate("label","keydown.multiselect",function(a){a.preventDefault();switch(a.which){case 9:case 27:b.close();break;case 38:case 40:case 37:case 39:b._traverse(a.which,this);break;case 13:d(this).find("input")[0].click()}}).delegate('input[type="checkbox"], input[type="radio"]',"click.multiselect",function(a){var c=d(this),g=this.value,e=this.checked,i=b.element.find("option");this.disabled||!1===b._trigger("click",a,{value:g,text:this.title,checked:e})?a.preventDefault():(c.focus(),c.attr("aria-selected",e),i.each(function(){this.value===g?this.selected=e:b.options.multiple||(this.selected=!1)}),b.options.multiple||(b.labels.removeClass("ui-state-active"),c.closest("label").toggleClass("ui-state-active",e),b.close()),b.element.trigger("change"),setTimeout(d.proxy(b.update,b),10))});d(document).bind("mousedown.multiselect",function(a){b._isOpen&&(!d.contains(b.menu[0],a.target)&&!d.contains(b.button[0],a.target)&&a.target!==b.button[0])&&b.close()});d(this.element[0].form).bind("reset.multiselect",function(){setTimeout(d.proxy(b.refresh,b),10)})},_setButtonWidth:function(){var a=this.element.outerWidth(),b=this.options;/\d/.test(b.minWidth)&&a<b.minWidth&&(a=b.minWidth);this.button.width(a)},_setMenuWidth:function(){var a=this.menu,b=this.button.outerWidth()-parseInt(a.css("padding-left"),10)-parseInt(a.css("padding-right"),10)-parseInt(a.css("border-right-width"),10)-parseInt(a.css("border-left-width"),10);a.width(b||this.button.outerWidth())},_traverse:function(a,b){var c=d(b),f=38===a||37===a,c=c.parent()[f?"prevAll":"nextAll"]("li:not(.ui-multiselect-disabled, .ui-multiselect-optgroup-label)")[f?"last":"first"]();c.length?c.find("label").trigger("mouseover"):(c=this.menu.find("ul").last(),this.menu.find("label")[f? "last":"first"]().trigger("mouseover"),c.scrollTop(f?c.height():0))},_toggleState:function(a,b){return function(){this.disabled||(this[a]=b);b?this.setAttribute("aria-selected",!0):this.removeAttribute("aria-selected")}},_toggleChecked:function(a,b){var c=b&&b.length?b:this.inputs,f=this;c.each(this._toggleState("checked",a));c.eq(0).focus();this.update();var h=c.map(function(){return this.value}).get();this.element.find("option").each(function(){!this.disabled&&-1<d.inArray(this.value,h)&&f._toggleState("selected",a).call(this)});c.length&&this.element.trigger("change")},_toggleDisabled:function(a){this.button.attr({disabled:a,"aria-disabled":a})[a?"addClass":"removeClass"]("ui-state-disabled");var b=this.menu.find("input"),b=a?b.filter(":enabled").data("ech-multiselect-disabled",!0):b.filter(function(){return!0===d.data(this,"ech-multiselect-disabled")}).removeData("ech-multiselect-disabled");b.attr({disabled:a,"arial-disabled":a}).parent()[a?"addClass":"removeClass"]("ui-state-disabled");this.element.attr({disabled:a,"aria-disabled":a})},open:function(){var a=this.button,b=this.menu,c=this.speed,f=this.options,h=[];if(!(!1===this._trigger("beforeopen")||a.hasClass("ui-state-disabled")||this._isOpen)){var g=b.find("ul").last(),e=f.show,i=a.offset();d.isArray(f.show)&&(e=f.show[0],c=f.show[1]||this.speed);e&&(h=[e,c]);g.scrollTop(0).height(f.height);d.ui.position&&!d.isEmptyObject(f.position)?(f.position.of=f.position.of||a,b.show().position(f.position).hide()):b.css({top:i.top+a.outerHeight(),left:i.left});d.fn.show.apply(b,h);this.labels.eq(0).trigger("mouseover").trigger("mouseenter").find("input").trigger("focus");a.addClass("ui-state-active");this._isOpen=!0;this._trigger("open")}},close:function(){if(!1!==this._trigger("beforeclose")){var a=this.options,b=a.hide,c=this.speed,f=[];d.isArray(a.hide)&&(b=a.hide[0],c=a.hide[1]||this.speed);b&&(f=[b,c]);d.fn.hide.apply(this.menu,f);this.button.removeClass("ui-state-active").trigger("blur").trigger("mouseleave");this._isOpen=!1;this._trigger("close")}},enable:function(){this._toggleDisabled(!1)},disable:function(){this._toggleDisabled(!0)},checkAll:function(){this._toggleChecked(!0);this._trigger("checkAll")},uncheckAll:function(){this._toggleChecked(!1);this._trigger("uncheckAll")},getChecked:function(){return this.menu.find("input").filter(":checked")},destroy:function(){d.Widget.prototype.destroy.call(this);this.button.remove();this.menu.remove();this.element.show();return this},isOpen:function(){return this._isOpen},widget:function(){return this.menu},getButton:function(){return this.button},_setOption:function(a,b){var c=this.menu;switch(a){case "header":c.find("div.ui-multiselect-header")[b?"show":"hide"]();break;case "checkAllText":c.find("a.ui-multiselect-all span").eq(-1).text(b);break;case "uncheckAllText":c.find("a.ui-multiselect-none span").eq(-1).text(b);break;case "height":c.find("ul").last().height(parseInt(b,10));break;case "minWidth":this.options[a]=parseInt(b,10);this._setButtonWidth();this._setMenuWidth();break;case "selectedText":case "selectedList":case "noneSelectedText":this.options[a]=b;this.update();break;case "classes":c.add(this.button).removeClass(this.options.classes).addClass(b);break;case "multiple":c.toggleClass("ui-multiselect-single",!b),this.options.multiple=b,this.element[0].multiple=b,this.refresh()}d.Widget.prototype._setOption.apply(this,arguments)}})})(jQuery);
\ No newline at end of file
<form action="{$thisUrl}?page={$thisPage}" method="post" id="searchForm" class="glm-right">
<input type="hidden" name="glm_action" value="list">
- <table>
- <tr>
- <th>Members Found:</th><td><span style="margin-right: 2em;">{$memberCount}</span></td>
- <th>Categories:</th>
- <td style="min-width: 25em; padding-right: 1em;">
- <select id="filterCategories" name="filterCategories[]" multiple="multiple">
+ <p>
+<!-- <th>Members Found:</th><td><span style="margin-right: 2em;">{$memberCount}</span></td> -->
+ <b>Categories: </b>
+ <select id="filterCategories" name="filterCategories[]" multiple="multiple" size="1">
{foreach from=$categories item=v}
<option value="{$v.id}" data-parent="{$v.parent}"{if $v.selected} selected{/if}>
{if $v.parent_id} {/if}{$v.name}
</option>
{/foreach}
- </select>
- </td>
- <td><input type="submit" value="Submit" style="margin-right: 2em;"></td>
- <th>Show Archived:</th><td><input type="checkbox" id="filterArchived" class="listFilter"{if $filterArchived} checked{/if} style="margin-right: 1em;"></td>
- <th>Pending Only:</th><td><input type="checkbox" id="filterPending" class="listFilter"{if $filterPending} checked{/if} style="margin-right: 1em;"></td>
- <th>Text Search:</th><td><input id="glmMembersSearch" type="text" id="autoTest"></td>
- </tr>
- </table>
+ </select>
+ <input type="submit" value="Submit" style="margin-right: 2em;">
+ <b>Show Archived: </b><input type="checkbox" id="filterArchived" class="listFilter"{if $filterArchived} checked{/if} style="margin-right: 1em;">
+ <b>Pending Only:</b><input type="checkbox" id="filterPending" class="listFilter"{if $filterPending} checked{/if} style="margin-right: 1em;">
+ <b>Text Search:</b><input id="glmMembersSearch" type="text" id="autoTest">
+ </p>
</form>
<h2>List of Members</h2>
});
// Expand multi-select on hover
- $('#filterCategories').multiselect({
- columns: 1,
- placeholder: 'Click to select categories',
- search: 1,
- selectAll: true,
- maxWidth: 200
- });
+ $('#filterCategories').multiselect();
});
projects / WP-Plugins / glm-member-db.git / commitdiff