Skip to content

B
bootstrap-multiselect
Commit 108d2b0f authored by David Stutz's avatar David Stutz
Browse files
Options

#550: some documentation on styling.

parent c7607fbd
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 12 deletions
dist/js/bootstrap-multiselect.js
View file @ 108d2b0f
......@@ -403,7 +403,7 @@
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
filter: '<li class="multiselect-item filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
li: '<li><a tabindex="0"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>',
......@@ -760,7 +760,7 @@
if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
//$("li.multiselect-group input", this.$ul).off();
$("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each(function () {
$(this).toggleClass('hidden', true);
$(this).toggleClass('multiselect-collapsible-hidden', true);
});
$("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
......@@ -768,7 +768,7 @@
var $li = $(event.target).closest('li');
var $inputs = $li.nextUntil("li.multiselect-group");
$inputs.toggleClass('hidden');
$inputs.toggleClass('multiselect-collapsible-hidden');
}, this));
$("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
......@@ -959,7 +959,7 @@
clearBtn.on('click', $.proxy(function(event){
clearTimeout(this.searchTimeout);
this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass("filter-hidden");
$('li', this.$ul).show().removeClass('multiselect-filter-hidden');
this.updateSelectAll();
}, this));
this.$filter.find('.input-group').append(clearBtn);
......@@ -1021,7 +1021,7 @@
}
// Toggle current element (group or group item) according to showElement boolean.
$(element).toggle(showElement).toggleClass('filter-hidden', !showElement);
$(element).toggle(showElement).toggleClass('multiselect-filter-hidden', !showElement);
// Differentiate groups and group items.
if ($(element).hasClass('multiselect-group')) {
......@@ -1032,12 +1032,12 @@
else {
// Show group name when at least one of its items is visible.
if (showElement) {
$(currentGroup).show().removeClass('filter-hidden');
$(currentGroup).show().removeClass('multiselect-filter-hidden');
}
// Show all group items when group name satisfies filter.
if (!showElement && currentGroupVisible) {
$(element).show().removeClass('filter-hidden');
$(element).show().removeClass('multiselect-filter-hidden');
}
}
}
......@@ -1467,7 +1467,7 @@
*/
updateSelectAll: function(notTriggerOnSelectAll) {
if (this.hasSelectAll()) {
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
var allBoxes = $("li:not(.multiselect-item):not(.multiselect-filter-hidden) input:enabled", this.$ul);
var allBoxesLength = allBoxes.length;
var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li.multiselect-all", this.$ul);
......
index.html
View file @ 108d2b0f
......@@ -32,6 +32,7 @@
<li class="active"><a href="#getting-started">Getting Started</a></li>
<li><a href="#configuration-options">Configuration Options</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#styling">Styling</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li>
<li><a href="#post">Server-Side Processing</a></li>
......@@ -3071,6 +3072,62 @@
</pre>
</div>
<div class="page-header">
<h2 id="styling">Styling</h2>
</div>
<p>The style of the pluign is fully adaptable through CSS; a completely rendered example is shown below - including select all option, filter and option gorups_</p>
<pre class="prettyprint linenums">
&lt;ul class=&quot;multiselect-container dropdown-menu&quot;&gt;
&lt;!-- Filter --&gt;
&lt;li class=&quot;multiselect-item multiselect-filter&quot; value=&quot;0&quot;&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;span class=&quot;input-group-addon&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-search&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;input class=&quot;form-control multiselect-search&quot; type=&quot;text&quot; placeholder=&quot;Search&quot;&gt;
&lt;span class=&quot;input-group-btn&quot;&gt;
&lt;button class=&quot;btn btn-default multiselect-clear-filter&quot; type=&quot;button&quot;&gt;&lt;i class=&quot;glyphicon glyphicon-remove-circle&quot;&gt;&lt;/i&gt;&lt;/button&gt;
&lt;/span&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;!-- Select all --&gt;
&lt;li class=&quot;multiselect-item multiselect-all&quot; style=&quot;border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(234, 234, 234); background: rgb(243, 243, 243);&quot;&gt;
&lt;a tabindex=&quot;0&quot; class=&quot;multiselect-all&quot;&gt;&lt;label class=&quot;checkbox&quot; style=&quot;padding: 3px 20px 3px 35px;&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;multiselect-all&quot;&gt; Select all&lt;/label&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;!-- Collapsible and clickable opt group --&gt;
&lt;li class=&quot;multiselect-item multiselect-group&quot;&gt;
&lt;a href=&quot;javascript:void(0);&quot;&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; value=&quot;undefined&quot;&gt;&lt;b&gt; Group 1&lt;/b&gt;&lt;/label&gt;
&lt;span class=&quot;caret-container&quot;&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;!-- Disabled and hidden option (hidden because of collapsible opt groups) --&gt;
&lt;li class=&quot;disabled hidden&quot;&gt;
&lt;a tabindex=&quot;-1&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1-1&quot; disabled=&quot;&quot;&gt; Option 1.1&lt;/label&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;!-- Hidden but select option --&gt;
&lt;li class=&quot;active hidden&quot;&gt;
&lt;a tabindex=&quot;0&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;1-2&quot;&gt; Option 1.2&lt;/label&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;!-- ... --&gt;
&lt;!-- Another opt group --&gt;
&lt;li class=&quot;multiselect-item multiselect-group&quot;&gt;
&lt;a href=&quot;javascript:void(0);&quot;&gt;
&lt;label&gt;&lt;input type=&quot;checkbox&quot; value=&quot;undefined&quot;&gt;&lt;b&gt; Group 2&lt;/b&gt;&lt;/label&gt;
&lt;span class=&quot;caret-container&quot;&gt;&lt;b class=&quot;caret&quot;&gt;&lt;/b&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/li&gt;
&lt;!-- Visible but not selected option --&gt;
&lt;li&gt;
&lt;a tabindex=&quot;0&quot;&gt;&lt;label class=&quot;checkbox&quot;&gt;&lt;input type=&quot;checkbox&quot; value=&quot;2-1&quot;&gt; Option 2.1&lt;/label&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
</pre>
<p>
The most important classes are: <code>multiselect-container</code>, <code>multiselect-filter<code>, <code>multiselect-all</code>, <code>multiselect-item</code>, <code>multiselect-group</code> as well as <code>disabled</code> and <code>active</code>. Both for collapsing and filtering options, the classes <code>multiselect-filter-hidden</code> and <code>multiselect-collapsible-hidden</code> are used.
</p>
<div class="page-header">
<h2 id="methods">Methods</h2>
</div>
......
tests/spec/bootstrap-multiselect.js
View file @ 108d2b0f
......@@ -409,14 +409,14 @@ describe('Bootstrap Multiselect "Collapsible Optgroups"', function() {
var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() {
expect($(this).hasClass('hidden')).toBe(false);
expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(false);
});
$('.caret-container', $group).click();
var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() {
expect($(this).hasClass('hidden')).toBe(true);
expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(true);
});
});
......@@ -509,14 +509,14 @@ describe('Bootstrap Multiselect "Clickable+Collapsible Optgroups"', function() {
var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() {
expect($(this).hasClass('hidden')).toBe(false);
expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(false);
});
$('.caret-container', $group).click();
var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() {
expect($(this).hasClass('hidden')).toBe(true);
expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(true);
});
});
......
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