Skip to content

B
bootstrap-multiselect
Commit 49e25ebc authored by David Stutz's avatar David Stutz
Browse files
Options

#270, #263, #260, #262, #261, #235. New option: includeSelectAllIfMoreThan.... 

#270, #263, #260, #262, #261, #235. New option: includeSelectAllIfMoreThan. Fixed issues with select all and dividers. Updated documentation concerning show/hide event.
parent bc9a8f2b
Hide whitespace changes
Inline Side-by-side
Showing with 121 additions and 20 deletions
README.md
View file @ 49e25ebc
......@@ -16,8 +16,9 @@ Every pull request is appreciated. To make it easier for me to merge fixes and n
* Include documentation for new options and features to avoid undocumented features.
* Add a thorough description to every pull request - so I am able to understand the purpose of the pull request.
* Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc.).
* Have a look at the code as to keep the code as comprehensible and coherent as possible (concerning code style, indentation etc. ...).
* Add comments to your code - to help me understand the committed code.
* Add a single pull request per fix or feature you add.
## License
......
index-2-3.html
View file @ 49e25ebc
......@@ -736,7 +736,12 @@
<tr>
<td><code>onDropdownShow</code></td>
<td>
This event handler is triggered when the dropdown are shown.
<p>
<span class="text-error">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
<p>
<span class="muted">This event handler is triggered when the dropdown are shown.</span>
</p>
</td>
<td>
<pre class="prettyprint linenums">
......@@ -755,7 +760,12 @@
<tr>
<td><code>onDropdownHide</code></td>
<td>
This event handler is triggered when the dropdown are hidden.
<p>
<span class="text-error">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
<p>
<span class="muted">This event handler is triggered when the dropdown are hidden.</span>
</p>
</td>
<td>
<pre class="prettyprint linenums">
......@@ -801,6 +811,24 @@
includeSelectAllOption: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllIfMoreThan</code></td>
<td>
If <code>includeSelectAllOption</code> is set to <code>true</code>, the select all option will be added if more than <code>includeSelectAllIfMoreThan</code> options are present. By default this option is set to <code>0</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1647,7 +1675,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}
else {
$(&quot;#example22&quot;).multiselect('select', element.val());
return false;
}
}
}
......@@ -2088,6 +2115,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p>
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
</p>
<p>
<b>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</b>
</p>
<p>
The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
</p>
</div>
<div class="container">
......
index.html
View file @ 49e25ebc
......@@ -194,6 +194,15 @@
$('#example41').multiselect({
includeSelectAllOption: true
});
$('#example44').multiselect({
onDropdownShow: function() {
alert('Dropdown shown!');
},
onDropdownHide: function() {
alert('Dropdown hidden ...');
}
});
});
</script>
<p>
......@@ -543,6 +552,21 @@
Using <code>optgroup</code> with filtering and the select all option.
</td>
</tr>
<tr>
<td>
<select id="example44" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
The <code>onDropdownShow</code> and <code>onDropdownHide</code> represent the <code>show.bs.dropdown</code> and <code>hide.bs.dropdown</code> events provided by Twitter Bootstrap.
</td>
</tr>
</table>
<div class="page-header">
......@@ -737,7 +761,12 @@
<tr>
<td><code>onDropdownShow</code></td>
<td>
This event handler is triggered when the dropdown are shown.
<p>
This event handler is triggered when the dropdown are shown.
</p>
<p>
<span class="text-warning">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
</td>
<td>
<pre class="prettyprint linenums">
......@@ -756,7 +785,12 @@
<tr>
<td><code>onDropdownHide</code></td>
<td>
This event handler is triggered when the dropdown are hidden.
<p>
This event handler is triggered when the dropdown are hidden.
</p>
<p>
<span class="text-warning">Both, the <code>onDropdownShow</code> and the <code>onDropdownHide</code> options are not supported when using Twitter Bootstrap 2.3.</span>
</p>
</td>
<td>
<pre class="prettyprint linenums">
......@@ -802,6 +836,24 @@
includeSelectAllOption: true
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>includeSelectAllIfMoreThan</code></td>
<td>
If <code>includeSelectAllOption</code> is set to <code>true</code>, the select all option will be added if more than <code>includeSelectAllIfMoreThan</code> options are present. By default this option is set to <code>0</code>.
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
includeSelectAllOption: true,
includeSelectAllIfMoreThan: 10
});
});
&lt;/script&gt;
</pre>
</td>
......@@ -1666,7 +1718,6 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
}
else {
$(&quot;#example22&quot;).multiselect('select', element.val());
return false;
}
}
}
......@@ -2107,6 +2158,14 @@ $(&quot;#multiselect&quot;).multiselect('dataprovider', data);
<p>
With version 2.0, jQuery no longer supports the older IE versions. Nevertheless, the plugin should run as expected using the 1.x branch of jQuery. See <a href="http://blog.jquery.com/2013/04/18/jquery-2-0-released/">here</a> for details.
</p>
<p>
<b>Using <code>return false;</code> within the <code>onChange</code> option does not prevent the option from being selected/deselected ...</b>
</p>
<p>
The <code>return</code> statement within the <code>onChange</code> method has no influence on the result. For preventing an option from being deselected or selected have a look at the examples in the <a href="#further-examples">Further Examples</a> section.
</p>
</div>
<div class="container">
......
js/bootstrap-multiselect.js
View file @ 49e25ebc
......@@ -181,7 +181,7 @@
* @param {jQuery} event
*/
onDropdownShow: function(event) {
},
/**
* Triggered when the dropdown is hidden.
......@@ -189,7 +189,7 @@
* @param {jQuery} event
*/
onDropdownHide: function(event) {
},
buttonClass: 'btn btn-default',
dropRight: false,
......@@ -200,6 +200,7 @@
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: false,
includeSelectAllOption: false,
includeSelectAllIfMoreThan: 0,
selectAllText: ' Select all',
selectAllValue: 'multiselect-all',
enableFiltering: false,
......@@ -248,7 +249,7 @@
}
// Manually add button width if set.
if (this.options.buttonWidth && this.options.buttonWidth != 'auto') {
if (this.options.buttonWidth && this.options.buttonWidth !== 'auto') {
this.$button.css({
'width' : this.options.buttonWidth
});
......@@ -343,13 +344,15 @@
if (isSelectAllOption) {
if (this.$select[0][0].value === this.options.selectAllValue) {
var values = [];
var options = $('option[value!="' + this.options.selectAllValue + '"]', this.$select);
// Check for visibility of options.
var options = $('option[value!="' + this.options.selectAllValue + '"][data-role!="divider"]', this.$select)
.filter(':visible');
for (var i = 0; i < options.length; i++) {
// Additionally check whether the option is visible within the dropcown.
if (options[i].value !== this.options.selectAllValue && this.getInputByValue(options[i].value).is(':visible')) {
values.push(options[i].value);
}
values.push(options[i].value);
}
if (checked) {
......@@ -573,11 +576,14 @@
buildSelectAll: function() {
var alreadyHasSelectAll = this.hasSelectAll();
// If options.includeSelectAllOption === true, add the include all checkbox.
if (this.options.includeSelectAllOption && this.options.multiple && !alreadyHasSelectAll) {
if (!alreadyHasSelectAll && this.options.includeSelectAllOption && this.options.multiple
&& $('option[data-role!="divider"]', this.$select).length > this.options.includeSelectAllIfMoreThan) {
// Check whether to add a divider after the select all.
if (this.options.includeSelectAllDivider) {
this.$select.prepend('<option value="" disabled="disabled" data-role="divider">');
}
this.$select.prepend('<option value="' + this.options.selectAllValue + '">' + this.options.selectAllText + '</option>');
}
},
......@@ -706,7 +712,7 @@
* @param {Array} selectValues
*/
select: function(selectValues) {
if(selectValues && !$.isArray(selectValues)) {
if(!$.isArray(selectValues)) {
selectValues = [selectValues];
}
......@@ -755,7 +761,7 @@
* @param {Array} deselectValues
*/
deselect: function(deselectValues) {
if(deselectValues && !$.isArray(deselectValues)) {
if(!$.isArray(deselectValues)) {
deselectValues = [deselectValues];
}
......@@ -857,7 +863,7 @@
* @returns {Boolean}
*/
hasSelectAll: function() {
return this.$select[0][0] ? this.$select[0][0].value === this.options.selectAllValue : false;
return $('input[value="' + this.options.selectAllValue + '"]', this.$ul).length > 0;
},
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment