Skip to content

Commit

Permalink
Performance tweaks 2 (#732)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@SteveTheTechie @mlh758
SteveTheTechie authored and mlh758 committed Jan 25, 2018
1 parent 105bb21 commit 406a6ba
Show file tree
Hide file tree
Showing 24 changed files with 654 additions and 634 deletions.
0 jquery.multiselect.css → css/jquery.multiselect.css
View file
File renamed without changes.
0 jquery.multiselect.filter.css → css/jquery.multiselect.filter.css
View file
File renamed without changes.
20 changes: 10 additions & 10 deletions demos/animations.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<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" />
Expand All @@ -14,15 +14,15 @@
<script type="text/javascript">
$(function(){

$("#test-1").multiselect({
show: ["bounce", 200],
hide: ["explode", 1000]
});
$("#test-2").multiselect({
show: "bounce",
hide: "explode"
});
$("#test-1").multiselect({
show: ["bounce", 200],
hide: ["explode", 1000]
});
$("#test-2").multiselect({
show: "bounce",
hide: "explode"
});

});
</script>
Expand Down
58 changes: 29 additions & 29 deletions demos/basic.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<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" />
Expand All @@ -13,7 +13,7 @@
<script type="text/javascript" src="../src/jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){
$("select").multiselect();
$("select").multiselect();
});
</script>
</head>
Expand All @@ -30,38 +30,38 @@ <h2>Basic Demos</h2>

<h3>Basic</h3>
<p>
<select title="Basic example" multiple="multiple" name="example-basic" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
</select>
<select title="Basic example" multiple="multiple" name="example-basic" size="5">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option10">Option 10</option>
<option value="option11">Option 11</option>
<option value="option12">Option 12</option>
</select>
</p>

<h3>With Optgroups</h3>
<p>Click on an optgroup's heading to toggle the checked state of the entire group.</p>
<p>
<select name="example-optgroup" multiple="multiple" size="5">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select>
<select name="example-optgroup" multiple="multiple" size="5">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select>
</p>

</body>
Expand Down
80 changes: 40 additions & 40 deletions demos/callbacks.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<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" />
Expand All @@ -14,38 +14,38 @@
<script type="text/javascript">
$(function(){

var $callback = $("#callback");
$("select").multiselect({
click: function(event, ui){
$callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
},
beforeopen: function(){
$callback.text("Select about to be opened...");
},
open: function(){
$callback.text("Select opened!");
},
beforeclose: function(){
$callback.text("Select about to be closed...");
},
close: function(){
$callback.text("Select closed!");
},
checkAll: function(){
$callback.text("Check all clicked!");
},
uncheckAll: function(){
$callback.text("Uncheck all clicked!");
},
optgrouptoggle: function(event, ui){
var values = $.map(ui.inputs, function(checkbox){
return checkbox.value;
}).join(", ");
$callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
}
});
var $callback = $("#callback");
$("select").multiselect({
click: function(event, ui){
$callback.text(ui.value + ' ' + (ui.checked ? 'checked' : 'unchecked') );
},
beforeopen: function(){
$callback.text("Select about to be opened...");
},
open: function(){
$callback.text("Select opened!");
},
beforeclose: function(){
$callback.text("Select about to be closed...");
},
close: function(){
$callback.text("Select closed!");
},
checkAll: function(){
$callback.text("Check all clicked!");
},
uncheckAll: function(){
$callback.text("Uncheck all clicked!");
},
optgrouptoggle: function(event, ui){
var values = $.map(ui.inputs, function(checkbox){
return checkbox.value;
}).join(", ");
$callback.html("<strong>Checkboxes " + (ui.checked ? "checked" : "unchecked") + ":</strong> " + values);
}
});

});
</script>
Expand All @@ -60,15 +60,15 @@ <h2>Callbacks &amp; Events</h2>

<select multiple="multiple" size="5">
<optgroup label="Group One">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</optgroup>
<optgroup label="Group Two">
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</optgroup>
</select>

Expand Down
12 changes: 6 additions & 6 deletions demos/enabledisable.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<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" />
Expand All @@ -14,11 +14,11 @@
<script type="text/javascript">
$(function(){

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

});
</script>
Expand Down
80 changes: 40 additions & 40 deletions demos/filter.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="../jquery.multiselect.filter.css" />
<link rel="stylesheet" type="text/css" href="../css/jquery.multiselect.css" />
<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" />
Expand All @@ -25,34 +25,34 @@ <h2>Filter Plugin</h2>
</pre>

<form style="margin:20px 0">
<p>
<select multiple="multiple" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</select>
</p>
<p>
<select multiple="multiple" style="width:370px">
<optgroup label="test">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="foo">
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</optgroup>
</select>
</p>
<p>
<select multiple="multiple" style="width:370px">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</select>
</p>
<p>
<select multiple="multiple" style="width:370px">
<optgroup label="test">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</optgroup>
<optgroup label="foo">
<option value="orange">Orange</option>
<option value="purple">Purple</option>
<option value="yellow">Yellow</option>
<option value="brown">Brown</option>
<option value="black">Black</option>
</optgroup>
</select>
</p>
</form>

<h3>Options:</h3>
Expand All @@ -68,10 +68,10 @@ <h3>Options:</h3>
<h3>Events:</h3>
<ul>
<li><code><strong>filter</strong></code>
<p>A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.</p>
<p>To do something when no matches are found:</p>
<p>A callback function that fires after filtering is complete. Accepts two arguments: the original event and an array of matches.</p>
<p>To do something when no matches are found:</p>
<pre class="prettyprint">
$("select").multiselect().multiselectfilter({
filter: function(event, matches){
Expand All @@ -82,26 +82,26 @@ <h3>Events:</h3>
});
</pre>

<p>To do something with a match:</p>
<p>To do something with a match:</p>
<pre class="prettyprint">
$("select").multiselect().multiselectfilter({
filter: function(event, matches){
// find the first matching checkbox
var first_match = $( matches[0] );
}
});
</pre>

<p>You can also bind to the event after a multiselect has been initialized, like such:
<p>You can also bind to the event after a multiselect has been initialized, like such:
<pre class="prettyprint">
$("select").bind("multiselectfilterfilter", function(event, matches){
// do something
});
</pre>
</li>
</ul>

Expand Down
Loading

0 comments on commit 406a6ba

Please sign in to comment.