New features (#751)

Fixes:

Fix #750 
Fix #721 
Fix #605 
Fix #467 
Fix #454
Fix #436 
Fix #232 
Fix #163, 
Fix #86

### Many new features and improvements:

1. Expanded on iconSet concept to create linkInfo option to allow configuration of all header link attributes, including icons, text, and titles.s.
2. Menu height can now be dynamically resized via the jQuery UI resizable widget, if loaded and resizableMenu option set to true.
3. Fixed some issues w/ the menu height getting mangled when filtering was in used.
4. Modifed how header option is used.  Can still set to false to hide header, but now it is also used to specify what header links are seen and in what order.
5. The multiselect can now also be used as a fixed list box (always open; no pop-up) via the listbox option.
6. New options groupsSelectable and groupsCollapsable control whether option groups can be selected and/or collapsed, respectively.
7. Option groups can now be set to be collapsable.  A new small button shows up at the left of each option group heading to collapse/expand the option group.
8. New resync and value methods allow quickly updating the widget options checked state from the underlying native select.
9. Can now use the up/down keys on closed single select to change the selected option if the button is focussed.
10. Fixed a previously unknown bug caused by binding menu events to the outer $menu container div instead of the $checkboxes container.  This bug caused the menu events handler to also try to handle header events.
11. Added the ability to reference option groups by their label or index for use as a filter.  Now usable programmatically in addOption, checkAll, uncheckAll, flipAll, collapseAll, and expandAll.
12. Simplified the auto width determination for the _setMenuWidth() method by tweaking the related CSS rules.  As a benefit, the _getScrollBarWidth() function has been eliminated.
13. Updated and simplified the _setMenuHeight() method to allow it to better work with filtering.
14. Re-wrote the filter widget--can now search option group headings and supports alternative filter rules.
15. Updated and added unit tests.
16. Updated demos and changed theme to Redmond--no more ugly construction orange.
17. Updated i18n files for new linkInfo option format.
18. Using .data('ech-multiselect') to fetch the instance now

Author: SteveTheTechie

css/jquery.multiselect.css

@@ -1,35 +1,41 @@
-.ui-multiselect {box-sizing: border-box; padding:2px 0 2px 4px; text-align:left;}
+.ui-multiselect {box-sizing: border-box; padding:2px 0 2px 4px; text-align:left; width: auto;}
 .ui-multiselect .ui-multiselect-open { float:right }
 
-.ui-multiselect-menu { display:none; box-sizing:border-box; position:absolute; text-align:left; z-index:101; width:auto; padding:3px;}
+.ui-multiselect-menu { display:none; box-sizing:border-box; position:absolute; text-align:left; z-index: 101; width:auto; height:auto; padding:3px; }
+.ui-multiselect-menu.ui-multiselect-listbox {position:relative; z-index: 0;}
 
 .ui-multiselect-header { display:block; box-sizing:border-box; position:relative; width:auto; padding:3px 0 3px 4px; margin-bottom:3px;}
 .ui-multiselect-header > ul { font-size:0.9em }
-.ui-multiselect-header > ul > li { float:left; padding:0 10px 0 0;}
+.ui-multiselect-header li { float:left; margin:0 10px 0 0;}
 .ui-multiselect-header a { text-decoration:none; }
 .ui-multiselect-header a:hover { text-decoration:underline; cursor: pointer;}
 .ui-multiselect-header .ui-icon { float:left; }
-.ui-multiselect-header .ui-multiselect-close { float:right; padding-right:0; text-align:right; }
+.ui-multiselect-header .ui-multiselect-close { float:right; margin-right:0; text-align:right; }
 
 .ui-multiselect-checkboxes { display:block; box-sizing:border-box; position:relative; overflow:auto; width: auto; border: 0;}
-.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px;}
-.ui-multiselect-checkboxes label > input { position:relative; top:1px; }
-.ui-multiselect-checkboxes label img { height: 30px; vertical-align: middle; padding-right: 3px;}
-.ui-multiselect-checkboxes > .ui-multiselect-optgroup > a { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
-.ui-multiselect-checkboxes > .ui-multiselect-optgroup > ul { padding: 3px; }
 .ui-multiselect-checkboxes li:not(.ui-multiselect-optgroup) { clear:both; font-size:0.9em; list-style: none; padding-right:3px;}
+.ui-multiselect-checkboxes label { border:1px solid transparent; cursor:default; display:block; padding:3px 1px;}
+.ui-multiselect-checkboxes input { position:relative; top:1px; cursor: pointer;}
+.ui-multiselect-checkboxes img { height: 30px; vertical-align: middle; margin-right: 3px;}
+.ui-multiselect-grouplabel { border-bottom:1px solid; cursor: pointer; display:block; font-weight:bold; margin:1px 0; padding:3px; text-align:center; text-decoration:none; }
+.ui-multiselect-optgroup > ul { padding: 3px; }
 .ui-multiselect-columns { display: inline-block; vertical-align: top; }
+.ui-multiselect-collapser { float: left; padding: 0 1px; margin: 0; }
+.ui-multiselect-collapsed > ul { display:none }
 
 .ui-multiselect-single .ui-multiselect-checkboxes input { left:-9999px; position:absolute !important; top: auto !important; }
 .ui-multiselect-single .ui-multiselect-checkboxes label { padding:5px !important }
 
-.ui-multiselect.ui-multiselect-nowrap { white-space: nowrap}
-.ui-multiselect.ui-multiselect-nowrap > span {display: inline-block}
+.ui-multiselect.ui-multiselect-nowrap { white-space: nowrap }
+.ui-multiselect.ui-multiselect-nowrap > span { display: inline-block }
 .ui-multiselect-checkboxes.ui-multiselect-nowrap li,
-.ui-multiselect-checkboxes.ui-multiselect-nowrap a{ white-space: nowrap}
+.ui-multiselect-checkboxes.ui-multiselect-nowrap a { white-space: nowrap }
 
 .ui-multiselect-measure > .ui-multiselect-header,
-.ui-multiselect-measure > .ui-multiselect-checkboxes { float:left; }
+.ui-multiselect-measure > .ui-multiselect-checkboxes { float: left; }
+.ui-multiselect-measure > .ui-multiselect-checkboxes { margin: 4px; overflow-y: scroll; }
+
+.ui-multiselect-resize { border: 2px dotted #00F }
 
 @media print{
     .ui-multiselect-menu {display: none;}

css/jquery.multiselect.filter.css

@@ -1,3 +1,4 @@
 .ui-multiselect-hasfilter ul { position:relative; top:2px }
-.ui-multiselect-filter { float:left; margin-right:10px; font-size:11px }
+.ui-multiselect-filter { float:left; margin-right:10px; font-size:11px; width:100%; }
 .ui-multiselect-filter input { width:100px; font-size:10px; margin-left:5px; height:15px; padding:2px; border:1px solid #292929; -webkit-appearance:textfield; -webkit-box-sizing:content-box; }
+.ui-multiselect-excluded {display: none}

demos/animations.htm

@@ -6,7 +6,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>

demos/assets/ba.hashchange.js

@@ -6,7 +6,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="assets/prettify.js"></script>

demos/basic.htm

@@ -6,7 +6,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>
@@ -15,7 +15,7 @@
 $(function(){
 
    var $callback = $("#callback");
-   
+
    $("select").multiselect({
       click: function(event, ui){
          $callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
@@ -42,8 +42,15 @@
          var values = $.map(ui.inputs, function(checkbox){
             return checkbox.value;
          }).join(", ");
-         
+
          $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
+      },
+      groupsCollapsable: true,
+      beforecollapsetoggle: function(){
+         $callback.text("Option group about to be collapsed/expanded...");
+      },
+      collapsetoggle: function(){
+         $callback.text("Option group collapsed/expanded");
       }
    });
 
@@ -54,7 +61,7 @@
 
 <h2>Callbacks &amp; Events</h2>
 <p>Demonstrating beforeopen, open, beforeclose, close, click, checkall, uncheckall, and optgrouptoggle callbacks/events.  Note that you can either
-pass in an event handler in the options object upon initialization, or bind to the event (including the multiselect prefix).  For example, to add an 
+pass in an event handler in the options object upon initialization, or bind to the event (including the multiselect prefix).  For example, to add an
 "open" handler, you can also use <code class="prettyprint">$("select").bind("multiselectopen", fn);</code></p>
 <p class="message success" id="callback">Callback target</p>
 
@@ -101,8 +108,15 @@ <h2>Callbacks &amp; Events</h2>
       var values = $.map(ui.inputs, function(checkbox){
          return checkbox.value;
       }).join(", ");
-      
+
       $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
+   },
+   groupsCollapsable: true,
+   beforecollapsetoggle: function(){
+      $callback.text("Option group about to be collapsed/expanded...");
+   },
+   collapsetoggle: function(){
+      $callback.text("Option group collapsed/expanded");
    }
 });
 </pre>

demos/callbacks.htm

@@ -6,7 +6,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>

demos/enabledisable.htm

@@ -7,7 +7,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.filter.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>

demos/filter.htm

@@ -5,28 +5,28 @@
 <title>jQuery MultiSelect Widget Demo</title>
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>
 <script type="text/javascript">
 $(function(){
-   
+
    // default
    $("#test-1").multiselect({
-      header: true
+      header: ['checkAll','uncheckAll']
    });
-   
+
    // off
    $("#test-2").multiselect({
       header: false
    });
-   
+
    // custom text
    $("#test-3").multiselect({
       header: "Choose options below"
    });
-   
+
 });
 </script>
 
@@ -37,7 +37,7 @@ <h2>Headers</h2>
 <p>The header option can be used in three ways:</p>
 
 <form>
-   <h3><code>header: true</code> (default)</h3>
+   <h3><code>header: ['checkAll','uncheckAll']</code> (default)</h3>
    <select id="test-1" multiple="multiple" size="5">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
@@ -47,7 +47,7 @@ <h3><code>header: true</code> (default)</h3>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
    </select>
-   
+
    <h3><code>header: false</code></h3>
    <select id="test-2" multiple="multiple" size="5">
    <option value="option1">Option 1</option>
@@ -58,7 +58,7 @@ <h3><code>header: false</code></h3>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
    </select>
-   
+
    <h3><code>header: "Choose options below"</code></h3>
    <select id="test-3" multiple="multiple" size="5">
    <option value="option1">Option 1</option>

demos/headers.htm

@@ -6,7 +6,7 @@
 <link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
 <link rel="stylesheet" type="text/css" href="assets/style.css" />
 <link rel="stylesheet" type="text/css" href="assets/prettify.css" />
-<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
+<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/redmond/jquery-ui.css" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../src/jquery.multiselect.js"></script>