Skip to content

Commit 406a6ba

Browse files
SteveTheTechiemlh758
SteveTheTechie
authored and
mlh758
committed
Performance tweaks 2 (#732)
1. Added css/ folder and moved css files there. Folder references updated. 2. Added iconSet option to be used for alternate icon sets. Removed individual icon options. 3. Ditched showCheckAll, showUncheckAll, and showFlipAll. Just set the respective text options to null to hide the respective links. 4. Various performance tweaks: - Minimized $().append() - Switched from $().appendTo() to $().append()--the latter is faster. - Reordered appends to minimize reflowing and combine appends. - Eliminated recursion in _buildOptionList by implementing a secondary loop. - Implemented the use of $().toggle() more widely.
1 parent 105bb21 commit 406a6ba

24 files changed

+654
-634
lines changed

‎jquery.multiselect.css renamed to ‎css/jquery.multiselect.css

File renamed without changes.

‎jquery.multiselect.filter.css renamed to ‎css/jquery.multiselect.filter.css

File renamed without changes.

‎demos/animations.htm

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>jQuery MultiSelect Widget Demo</title>
6-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
6+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
77
<link rel="stylesheet" type="text/css" href="assets/style.css" />
88
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
99
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
@@ -14,15 +14,15 @@
1414
<script type="text/javascript">
1515
$(function(){
1616

17-
$("#test-1").multiselect({
18-
show: ["bounce", 200],
19-
hide: ["explode", 1000]
20-
});
21-
22-
$("#test-2").multiselect({
23-
show: "bounce",
24-
hide: "explode"
25-
});
17+
$("#test-1").multiselect({
18+
show: ["bounce", 200],
19+
hide: ["explode", 1000]
20+
});
21+
22+
$("#test-2").multiselect({
23+
show: "bounce",
24+
hide: "explode"
25+
});
2626

2727
});
2828
</script>

‎demos/basic.htm

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>jQuery MultiSelect Widget Demo</title>
6-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
6+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
77
<link rel="stylesheet" type="text/css" href="assets/style.css" />
88
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
99
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
@@ -13,7 +13,7 @@
1313
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
1414
<script type="text/javascript">
1515
$(function(){
16-
$("select").multiselect();
16+
$("select").multiselect();
1717
});
1818
</script>
1919
</head>
@@ -30,38 +30,38 @@ <h2>Basic Demos</h2>
3030

3131
<h3>Basic</h3>
3232
<p>
33-
<select title="Basic example" multiple="multiple" name="example-basic" size="5">
34-
<option value="option1">Option 1</option>
35-
<option value="option2">Option 2</option>
36-
<option value="option3">Option 3</option>
37-
<option value="option4">Option 4</option>
38-
<option value="option5">Option 5</option>
39-
<option value="option6">Option 6</option>
40-
<option value="option7">Option 7</option>
41-
<option value="option8">Option 8</option>
42-
<option value="option9">Option 9</option>
43-
<option value="option10">Option 10</option>
44-
<option value="option11">Option 11</option>
45-
<option value="option12">Option 12</option>
46-
</select>
33+
<select title="Basic example" multiple="multiple" name="example-basic" size="5">
34+
<option value="option1">Option 1</option>
35+
<option value="option2">Option 2</option>
36+
<option value="option3">Option 3</option>
37+
<option value="option4">Option 4</option>
38+
<option value="option5">Option 5</option>
39+
<option value="option6">Option 6</option>
40+
<option value="option7">Option 7</option>
41+
<option value="option8">Option 8</option>
42+
<option value="option9">Option 9</option>
43+
<option value="option10">Option 10</option>
44+
<option value="option11">Option 11</option>
45+
<option value="option12">Option 12</option>
46+
</select>
4747
</p>
4848

4949
<h3>With Optgroups</h3>
5050
<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
5151
<p>
52-
<select name="example-optgroup" multiple="multiple" size="5">
53-
<optgroup label="Group One">
54-
<option value="option1">Option 1</option>
55-
<option value="option2">Option 2</option>
56-
<option value="option3">Option 3</option>
57-
</optgroup>
58-
<optgroup label="Group Two">
59-
<option value="option4">Option 4</option>
60-
<option value="option5">Option 5</option>
61-
<option value="option6">Option 6</option>
62-
<option value="option7">Option 7</option>
63-
</optgroup>
64-
</select>
52+
<select name="example-optgroup" multiple="multiple" size="5">
53+
<optgroup label="Group One">
54+
<option value="option1">Option 1</option>
55+
<option value="option2">Option 2</option>
56+
<option value="option3">Option 3</option>
57+
</optgroup>
58+
<optgroup label="Group Two">
59+
<option value="option4">Option 4</option>
60+
<option value="option5">Option 5</option>
61+
<option value="option6">Option 6</option>
62+
<option value="option7">Option 7</option>
63+
</optgroup>
64+
</select>
6565
</p>
6666

6767
</body>

‎demos/callbacks.htm

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>jQuery MultiSelect Widget Demo</title>
6-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
6+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
77
<link rel="stylesheet" type="text/css" href="assets/style.css" />
88
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
99
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
@@ -14,38 +14,38 @@
1414
<script type="text/javascript">
1515
$(function(){
1616

17-
var $callback = $("#callback");
18-
19-
$("select").multiselect({
20-
click: function(event, ui){
21-
$callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
22-
},
23-
beforeopen: function(){
24-
$callback.text("Select about to be opened...");
25-
},
26-
open: function(){
27-
$callback.text("Select opened!");
28-
},
29-
beforeclose: function(){
30-
$callback.text("Select about to be closed...");
31-
},
32-
close: function(){
33-
$callback.text("Select closed!");
34-
},
35-
checkAll: function(){
36-
$callback.text("Check all clicked!");
37-
},
38-
uncheckAll: function(){
39-
$callback.text("Uncheck all clicked!");
40-
},
41-
optgrouptoggle: function(event, ui){
42-
var values = $.map(ui.inputs, function(checkbox){
43-
return checkbox.value;
44-
}).join(", ");
45-
46-
$callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
47-
}
48-
});
17+
var $callback = $("#callback");
18+
19+
$("select").multiselect({
20+
click: function(event, ui){
21+
$callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
22+
},
23+
beforeopen: function(){
24+
$callback.text("Select about to be opened...");
25+
},
26+
open: function(){
27+
$callback.text("Select opened!");
28+
},
29+
beforeclose: function(){
30+
$callback.text("Select about to be closed...");
31+
},
32+
close: function(){
33+
$callback.text("Select closed!");
34+
},
35+
checkAll: function(){
36+
$callback.text("Check all clicked!");
37+
},
38+
uncheckAll: function(){
39+
$callback.text("Uncheck all clicked!");
40+
},
41+
optgrouptoggle: function(event, ui){
42+
var values = $.map(ui.inputs, function(checkbox){
43+
return checkbox.value;
44+
}).join(", ");
45+
46+
$callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
47+
}
48+
});
4949

5050
});
5151
</script>
@@ -60,15 +60,15 @@ <h2>Callbacks &amp; Events</h2>
6060

6161
<select multiple="multiple" size="5">
6262
<optgroup label="Group One">
63-
<option value="option1">Option 1</option>
64-
<option value="option2">Option 2</option>
65-
<option value="option3">Option 3</option>
63+
<option value="option1">Option 1</option>
64+
<option value="option2">Option 2</option>
65+
<option value="option3">Option 3</option>
6666
</optgroup>
6767
<optgroup label="Group Two">
68-
<option value="option4">Option 4</option>
69-
<option value="option5">Option 5</option>
70-
<option value="option6">Option 6</option>
71-
<option value="option7">Option 7</option>
68+
<option value="option4">Option 4</option>
69+
<option value="option5">Option 5</option>
70+
<option value="option6">Option 6</option>
71+
<option value="option7">Option 7</option>
7272
</optgroup>
7373
</select>
7474

‎demos/enabledisable.htm

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>jQuery MultiSelect Widget Demo</title>
6-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
6+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
77
<link rel="stylesheet" type="text/css" href="assets/style.css" />
88
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
99
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
@@ -14,11 +14,11 @@
1414
<script type="text/javascript">
1515
$(function(){
1616

17-
var $widget = $("select").multiselect(), state = true;
18-
$("#toggle-disabled").click(function(){
19-
state = !state;
20-
$widget.multiselect(state ? 'disable' : 'enable');
21-
});
17+
var $widget = $("select").multiselect(), state = true;
18+
$("#toggle-disabled").click(function(){
19+
state = !state;
20+
$widget.multiselect(state ? 'disable' : 'enable');
21+
});
2222

2323
});
2424
</script>

‎demos/filter.htm

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
<head>
44
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
55
<title>jQuery MultiSelect Widget Demo</title>
6-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
7-
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.filter.css" />
6+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
7+
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.filter.css" />
88
<link rel="stylesheet" type="text/css" href="assets/style.css" />
99
<link rel="stylesheet" type="text/css" href="assets/prettify.css" />
1010
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
@@ -25,34 +25,34 @@ <h2>Filter Plugin</h2>
2525
</pre>
2626

2727
<form style="margin:20px 0">
28-
<p>
29-
<select multiple="multiple" style="width:370px">
30-
<option value="red">Red</option>
31-
<option value="green">Green</option>
32-
<option value="blue">Blue</option>
33-
<option value="orange">Orange</option>
34-
<option value="purple">Purple</option>
35-
<option value="yellow">Yellow</option>
36-
<option value="brown">Brown</option>
37-
<option value="black">Black</option>
38-
</select>
39-
</p>
40-
<p>
41-
<select multiple="multiple" style="width:370px">
42-
<optgroup label="test">
43-
<option value="red">Red</option>
44-
<option value="green">Green</option>
45-
<option value="blue">Blue</option>
46-
</optgroup>
47-
<optgroup label="foo">
48-
<option value="orange">Orange</option>
49-
<option value="purple">Purple</option>
50-
<option value="yellow">Yellow</option>
51-
<option value="brown">Brown</option>
52-
<option value="black">Black</option>
53-
</optgroup>
54-
</select>
55-
</p>
28+
<p>
29+
<select multiple="multiple" style="width:370px">
30+
<option value="red">Red</option>
31+
<option value="green">Green</option>
32+
<option value="blue">Blue</option>
33+
<option value="orange">Orange</option>
34+
<option value="purple">Purple</option>
35+
<option value="yellow">Yellow</option>
36+
<option value="brown">Brown</option>
37+
<option value="black">Black</option>
38+
</select>
39+
</p>
40+
<p>
41+
<select multiple="multiple" style="width:370px">
42+
<optgroup label="test">
43+
<option value="red">Red</option>
44+
<option value="green">Green</option>
45+
<option value="blue">Blue</option>
46+
</optgroup>
47+
<optgroup label="foo">
48+
<option value="orange">Orange</option>
49+
<option value="purple">Purple</option>
50+
<option value="yellow">Yellow</option>
51+
<option value="brown">Brown</option>
52+
<option value="black">Black</option>
53+
</optgroup>
54+
</select>
55+
</p>
5656
</form>
5757

5858
<h3>Options:</h3>
@@ -68,10 +68,10 @@ <h3>Options:</h3>
6868
<h3>Events:</h3>
6969
<ul>
7070
<li><code><strong>filter</strong></code>
71-
<p>A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.</p>
72-
73-
<p>To do something when no matches are found:</p>
74-
71+
<p>A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.</p>
72+
73+
<p>To do something when no matches are found:</p>
74+
7575
<pre class="prettyprint">
7676
$("select").multiselect().multiselectfilter({
7777
filter: function(event, matches){
@@ -82,26 +82,26 @@ <h3>Events:</h3>
8282
});
8383
</pre>
8484

85-
<p>To do something with a match:</p>
86-
85+
<p>To do something with a match:</p>
86+
8787
<pre class="prettyprint">
8888
$("select").multiselect().multiselectfilter({
8989
filter: function(event, matches){
90-
90+
9191
// find the first matching checkbox
9292
var first_match = $( matches[0] );
9393
}
9494
});
9595
</pre>
9696

97-
<p>You can also bind to the event after a multiselect has been initialized, like such:
98-
97+
<p>You can also bind to the event after a multiselect has been initialized, like such:
98+
9999
<pre class="prettyprint">
100100
$("select").bind("multiselectfilterfilter", function(event, matches){
101101
// do something
102102
});
103103
</pre>
104-
104+
105105
</li>
106106
</ul>
107107

0 commit comments

Comments
 (0)