diff options
| -rw-r--r-- | css/application.css | 12 | ||||
| -rw-r--r-- | demos.html | 19 | ||||
| -rw-r--r-- | documentation.html | 12 | ||||
| -rw-r--r-- | js/application.js | 4 | ||||
| -rw-r--r-- | js/jquery.multi-select.js | 7 |
5 files changed, 51 insertions, 3 deletions
diff --git a/css/application.css b/css/application.css index 30388f0..ee5a8b9 100644 --- a/css/application.css +++ b/css/application.css @@ -90,6 +90,18 @@ h3{ color: #555; } +h4{ + margin: 0; + padding: 3px; + background: #777; + color: #fff; + text-align: center; + border: 1px #333 solid; + -webkit-border-radius: 4px 4px 0px 0px; + -moz-border-radius: 4px 4px 0px 0px; + border-radius: 4px 4px 0px 0px; +} + ul{ margin: 0px 0px 0px 20px; padding: 0; @@ -38,6 +38,7 @@ <li id='callbacks'>Callbacks</li> <li id='outside'>Outside call</li> <li id='multiple'>Multiple</li> + <li id='headers'>Headers</li> </ul> <div id='demos-content'> <div class='simple'> @@ -124,7 +125,23 @@ <option value='cn'>China</option> </select> </form> - + </div> + <div class='headers' style='display:none'> + <form> + <select multiple='multiple' id='multipleHeaders'> + <option value='fr'>France</option> + <option value='ca'>Canada</option> + <option value='ar'>Argentina</option> + <option value='pt'>Portugal</option> + <option value='us'>United States</option> + <option value='gb'>United Kingdom</option> + <option value='au'>Australia</option> + <option value='ao'>Angola</option> + <option value='aq'>Antarctica</option> + <option value='bq'>Burkina Faso</option> + <option value='cn'>China</option> + </select> + </form> </div> </div> </div> diff --git a/documentation.html b/documentation.html index 81646c8..549834b 100644 --- a/documentation.html +++ b/documentation.html @@ -50,6 +50,16 @@ <td>function() {}</td> <td>Function to call after one option is deselected.</td> </tr> + <tr> + <td>selectableHeader</td> + <td>null</td> + <td>Text or HTML to display on the selectable container</td> + </tr> + <tr> + <td>selectedHeader</td> + <td>null</td> + <td>Text or HTML to display on the selected container</td> + </tr> </table> <h2>Methods</h2> <p> @@ -59,7 +69,7 @@ <table> <tr> <th>method</th> - <th>options</th> + <th>params</th> <th>example</th> </tr> <tr> diff --git a/js/application.js b/js/application.js index 814c8fc..068746c 100644 --- a/js/application.js +++ b/js/application.js @@ -1,6 +1,10 @@ (function($){ $(function(){ $('.multiselect').multiSelect(); + $('#multipleHeaders').multiSelect({ + selectableHeader : '<h4>Selectable Items</h4>', + selectedHeader : '<h4>Selected Items</h4>' + }); $('#callbackCountries').multiSelect({ afterSelect: function(value, text){ diff --git a/js/jquery.multi-select.js b/js/jquery.multi-select.js index 9c8aa9c..8090cd5 100644 --- a/js/jquery.multi-select.js +++ b/js/jquery.multi-select.js @@ -3,7 +3,6 @@ var msMethods = { 'init' : function(options){ this.settings = { - }; if(options) { this.settings = $.extend(this.settings, options); @@ -29,7 +28,13 @@ }); selectableUl.append(selectableLi); }); + if (multiSelects.settings.selectableHeader){ + selectableContainer.append(multiSelects.settings.selectableHeader); + } selectableContainer.append(selectableUl); + if (multiSelects.settings.selectedHeader){ + selectedContainer.append(multiSelects.settings.selectedHeader); + } selectedContainer.append(selectedUl); container.append(selectableContainer); container.append(selectedContainer); |