Skip to content

B
bootstrap-multiselect
Commit 8df89fd3 authored by David Stutz's avatar David Stutz
Browse files
Options

Merge pull request #521 from aqwsez/master 

Added option to collapse groups (some kind of sub menu)
parents 2514256e 4888cde8
Hide whitespace changes
Inline Side-by-side
Showing with 173 additions and 1 deletion
dist/js/collapsibleOptGroups.js 0 → 100644
View file @ 8df89fd3
! function(e) {
"use strict";
jQuery.fn.multiselect.Constructor.prototype.selectAll = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.selectAll;
return function() {
var args = Array.prototype.slice.call( arguments );
args[0] = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : args[0];
cached_function.apply(this, args);
};
}());
jQuery.fn.multiselect.Constructor.prototype.deselectAll = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.deselectAll;
return function() {
var args = Array.prototype.slice.call( arguments );
args[0] = (this.options.enableCollapsibleOptGroups && this.options.multiple) ? false : args[0];
cached_function.apply(this, args);
};
}());
jQuery.fn.multiselect.Constructor.prototype.createOptgroup = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.createOptgroup;
return function() {
var args = Array.prototype.slice.call( arguments );
var t = args[0];
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
var n = e(t).attr("label");
var v = e(t).attr("value");
var r = e('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><input type="checkbox" value="' + v + '"/><b> ' + n + '<b class="caret"></b></b></a></li>');
if (this.options.enableClickableOptGroups) {
r.addClass("multiselect-group-clickable")
}
this.$ul.append(r);
if (e(t).is(":disabled")) {
r.addClass("disabled")
}
e("option", t).each(e.proxy(function(e, t) {
this.createOptionValue(t)
}, this))
} else {
cached_function.apply(this, arguments);
}
};
}());
jQuery.fn.multiselect.Constructor.prototype.buildDropdownOptions = (function() {
var cached_function = jQuery.fn.multiselect.Constructor.prototype.buildDropdownOptions;
return function() {
cached_function.apply(this, arguments);
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
e("li.multiselect-group input", this.$ul).off();
e("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each( function () {
$(this).toggleClass('hidden', true);
});
e("li.multiselect-group", this.$ul).on("click", e.proxy(function(t) {
t.stopPropagation();
}, this));
e("li.multiselect-group > a > b", this.$ul).on("click", e.proxy(function(t) {
t.stopPropagation();
var n = e(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
r.each(function() {
i = i && e(this).hasClass('hidden');
});
r.toggleClass('hidden', !i);
}, this));
e("li.multiselect-group > a > input", this.$ul).on("change", e.proxy(function(t) {
t.stopPropagation();
var n = e(t.target).closest('li');
var r = n.nextUntil("li.multiselect-group");
var i = true;
var s = r.find("input");
s.each(function() {
i = i && e(this).prop("checked")
});
s.prop("checked", !i).trigger("change")
}, this));
e("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
e("li.multiselect-group > a, li.multiselect-all > a > label.checkbox", this.$ul).css('padding', '3px 20px 3px 35px');
e("li.multiselect-group > a > input", this.$ul).css('margin', '4px 0px 5px -20px');
}
};
}());
}(window.jQuery)
index.html
View file @ 8df89fd3
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
......@@ -15,6 +15,7 @@
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css">
<script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="dist/js/collapsibleOptGroups.js"></script>
<script type="text/javascript">
$(document).ready(function() {
......@@ -2155,6 +2156,85 @@
&lt;option value="m"&gt;Option 13&lt;/option&gt;
&lt;option value="n"&gt;Option 14&lt;/option&gt;
&lt;/select&gt;
</pre>
</div>
</td>
</tr>
<tr>
<td>
<code>enableCollapsibleOptGroups</code>
</td>
<td>
<p>
Make your groups collapsible.
</p>
<div class="example">
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
</script>
<select id="example-enableCollapsibleOptGroups" multiple="multiple">
<optgroup label="Group1">
<option value="1a">Option 1</option>
<option value="1b">Option 2</option>
<option value="1c">Option 3</option>
<option value="1d">Option 4</option>
<option value="1e">Option 5</option>
</optgroup>
<optgroup label="Group2">
<option value="2a">Option 1</option>
<option value="2b">Option 2</option>
<option value="2c">Option 3</option>
<option value="2d">Option 4</option>
<option value="2e">Option 5</option>
</optgroup>
<optgroup label="Group3">
<option value="3a">Option 1</option>
<option value="3b">Option 2</option>
<option value="3c">Option 3</option>
<option value="3d">Option 4</option>
<option value="3e">Option 5</option>
</optgroup>
</select>
</div>
<div class="highlight">
<pre class="prettyprint linenums">
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
$('#example-enableCollapsibleOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
&lt;/script&gt;
&lt;select id="example-enableCollapsibleOptGroups" multiple="multiple"&gt;
&lt;optgroup label="Group1"&gt;
&lt;option value="1a"&gt;Option 1&lt;/option&gt;
&lt;option value="1b"&gt;Option 2&lt;/option&gt;
&lt;option value="1c"&gt;Option 3&lt;/option&gt;
&lt;option value="1d"&gt;Option 4&lt;/option&gt;
&lt;option value="1e"&gt;Option 5&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label="Group2"&gt;
&lt;option value="2a"&gt;Option 1&lt;/option&gt;
&lt;option value="2b"&gt;Option 2&lt;/option&gt;
&lt;option value="2c"&gt;Option 3&lt;/option&gt;
&lt;option value="2d"&gt;Option 4&lt;/option&gt;
&lt;option value="2e"&gt;Option 5&lt;/option&gt;
&lt;/optgroup&gt;
&lt;optgroup label="Group3"&gt;
&lt;option value="3a"&gt;Option 1&lt;/option&gt;
&lt;option value="3b"&gt;Option 2&lt;/option&gt;
&lt;option value="3c"&gt;Option 3&lt;/option&gt;
&lt;option value="3d"&gt;Option 4&lt;/option&gt;
&lt;option value="3e"&gt;Option 5&lt;/option&gt;
&lt;/optgroup&gt;
&lt;/select&gt;
</pre>
</div>
</td>
......
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