|
4 | 4 | <script type="text/javascript">
|
5 | 5 | $(function(){
|
6 | 6 |
|
7 |
| - var $callback = $("#callback"); |
8 |
| - |
9 |
| - $("select").multiselect({ |
10 |
| - click: function(event, ui){ |
11 |
| - $callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') ); |
12 |
| - }, |
13 |
| - beforeopen: function(){ |
14 |
| - $callback.text("Select about to be opened..."); |
15 |
| - }, |
16 |
| - open: function(){ |
17 |
| - $callback.text("Select opened!"); |
18 |
| - }, |
19 |
| - beforeclose: function(){ |
20 |
| - $callback.text("Select about to be closed..."); |
21 |
| - }, |
22 |
| - close: function(){ |
23 |
| - $callback.text("Select closed!"); |
24 |
| - }, |
25 |
| - checkAll: function(){ |
26 |
| - $callback.text("Check all clicked!"); |
27 |
| - }, |
28 |
| - uncheckAll: function(){ |
29 |
| - $callback.text("Uncheck all clicked!"); |
30 |
| - }, |
31 |
| - optgrouptoggle: function(event, ui){ |
32 |
| - var values = $.map(ui.inputs, function(checkbox){ |
33 |
| - return checkbox.value; |
34 |
| - }).join(", "); |
35 |
| - |
36 |
| - $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values); |
37 |
| - } |
38 |
| - }); |
| 7 | + var $callback = $("#callback"); |
| 8 | + |
| 9 | + $("select").multiselect({ |
| 10 | + click: function(event, ui){ |
| 11 | + $callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') ); |
| 12 | + }, |
| 13 | + beforeopen: function(){ |
| 14 | + $callback.text("Select about to be opened..."); |
| 15 | + }, |
| 16 | + open: function(){ |
| 17 | + $callback.text("Select opened!"); |
| 18 | + }, |
| 19 | + beforeclose: function(){ |
| 20 | + $callback.text("Select about to be closed..."); |
| 21 | + }, |
| 22 | + close: function(){ |
| 23 | + $callback.text("Select closed!"); |
| 24 | + }, |
| 25 | + checkAll: function(){ |
| 26 | + $callback.text("Check all clicked!"); |
| 27 | + }, |
| 28 | + uncheckAll: function(){ |
| 29 | + $callback.text("Uncheck all clicked!"); |
| 30 | + }, |
| 31 | + optgrouptoggle: function(event, ui){ |
| 32 | + var values = $.map(ui.inputs, function(checkbox){ |
| 33 | + return checkbox.value; |
| 34 | + }).join(", "); |
| 35 | + |
| 36 | + $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values); |
| 37 | + }, |
| 38 | + groupsCollapsable: true, |
| 39 | + beforecollapsetoggle: function(){ |
| 40 | + $callback.text("Option group about to be collapsed/expanded..."); |
| 41 | + }, |
| 42 | + collapsetoggle: function(){ |
| 43 | + $callback.text("Option group collapsed/expanded"); |
| 44 | + } |
| 45 | + }); |
39 | 46 |
|
40 | 47 | });
|
41 | 48 | </script>
|
42 | 49 | <h2>Callbacks & Events</h2>
|
43 | 50 | <p>Demonstrating beforeopen, open, beforeclose, close, click, checkall, uncheckall, and optgrouptoggle callbacks/events. Note that you can either
|
44 |
| -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 |
| 51 | +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 |
45 | 52 | "open" handler, you can also use <code class="prettyprint">$("select").bind("multiselectopen", fn);</code></p>
|
46 | 53 | <p class="message success" id="callback">Callback target</p>
|
47 | 54 |
|
48 | 55 | <select multiple="multiple" size="5">
|
49 | 56 | <optgroup label="Group One">
|
50 |
| - <option value="option1">Option 1</option> |
51 |
| - <option value="option2">Option 2</option> |
52 |
| - <option value="option3">Option 3</option> |
| 57 | + <option value="option1">Option 1</option> |
| 58 | + <option value="option2">Option 2</option> |
| 59 | + <option value="option3">Option 3</option> |
53 | 60 | </optgroup>
|
54 | 61 | <optgroup label="Group Two">
|
55 |
| - <option value="option4">Option 4</option> |
56 |
| - <option value="option5">Option 5</option> |
57 |
| - <option value="option6">Option 6</option> |
58 |
| - <option value="option7">Option 7</option> |
| 62 | + <option value="option4">Option 4</option> |
| 63 | + <option value="option5">Option 5</option> |
| 64 | + <option value="option6">Option 6</option> |
| 65 | + <option value="option7">Option 7</option> |
59 | 66 | </optgroup>
|
60 | 67 | </select>
|
61 | 68 |
|
@@ -88,8 +95,15 @@ <h2>Callbacks & Events</h2>
|
88 | 95 | var values = $.map(ui.inputs, function(checkbox){
|
89 | 96 | return checkbox.value;
|
90 | 97 | }).join(", ");
|
91 |
| - |
| 98 | + |
92 | 99 | $callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
|
| 100 | + }, |
| 101 | + groupsCollapsable: true, |
| 102 | + beforecollapsetoggle: function(){ |
| 103 | + $callback.text("Option group about to be collapsed/expanded..."); |
| 104 | + }, |
| 105 | + collapsetoggle: function(){ |
| 106 | + $callback.text("Option group collapsed/expanded"); |
93 | 107 | }
|
94 | 108 | });
|
95 | 109 | </pre>
|
0 commit comments