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 @@ ...@@ -403,7 +403,7 @@
templates: { templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>', 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>', 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>', 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>', li: '<li><a tabindex="0"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>', divider: '<li class="multiselect-item divider"></li>',
...@@ -760,7 +760,7 @@ ...@@ -760,7 +760,7 @@
if (this.options.enableCollapsibleOptGroups && this.options.multiple) { if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
//$("li.multiselect-group input", this.$ul).off(); //$("li.multiselect-group input", this.$ul).off();
$("li.multiselect-group", this.$ul).siblings().not("li.multiselect-group, li.multiselect-all", this.$ul).each(function () { $("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) { $("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
...@@ -768,7 +768,7 @@ ...@@ -768,7 +768,7 @@
var $li = $(event.target).closest('li'); var $li = $(event.target).closest('li');
var $inputs = $li.nextUntil("li.multiselect-group"); var $inputs = $li.nextUntil("li.multiselect-group");
$inputs.toggleClass('hidden'); $inputs.toggleClass('multiselect-collapsible-hidden');
}, this)); }, this));
$("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea'); $("li.multiselect-all", this.$ul).css('background', '#f3f3f3').css('border-bottom', '1px solid #eaeaea');
...@@ -959,7 +959,7 @@ ...@@ -959,7 +959,7 @@
clearBtn.on('click', $.proxy(function(event){ clearBtn.on('click', $.proxy(function(event){
clearTimeout(this.searchTimeout); clearTimeout(this.searchTimeout);
this.$filter.find('.multiselect-search').val(''); this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass("filter-hidden"); $('li', this.$ul).show().removeClass('multiselect-filter-hidden');
this.updateSelectAll(); this.updateSelectAll();
}, this)); }, this));
this.$filter.find('.input-group').append(clearBtn); this.$filter.find('.input-group').append(clearBtn);
...@@ -1021,7 +1021,7 @@ ...@@ -1021,7 +1021,7 @@
} }
// Toggle current element (group or group item) according to showElement boolean. // 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. // Differentiate groups and group items.
if ($(element).hasClass('multiselect-group')) { if ($(element).hasClass('multiselect-group')) {
...@@ -1032,12 +1032,12 @@ ...@@ -1032,12 +1032,12 @@
else { else {
// Show group name when at least one of its items is visible. // Show group name when at least one of its items is visible.
if (showElement) { if (showElement) {
$(currentGroup).show().removeClass('filter-hidden'); $(currentGroup).show().removeClass('multiselect-filter-hidden');
} }
// Show all group items when group name satisfies filter. // Show all group items when group name satisfies filter.
if (!showElement && currentGroupVisible) { if (!showElement && currentGroupVisible) {
$(element).show().removeClass('filter-hidden'); $(element).show().removeClass('multiselect-filter-hidden');
} }
} }
} }
...@@ -1467,7 +1467,7 @@ ...@@ -1467,7 +1467,7 @@
*/ */
updateSelectAll: function(notTriggerOnSelectAll) { updateSelectAll: function(notTriggerOnSelectAll) {
if (this.hasSelectAll()) { 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 allBoxesLength = allBoxes.length;
var checkedBoxesLength = allBoxes.filter(":checked").length; var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li.multiselect-all", this.$ul); var selectAllLi = $("li.multiselect-all", this.$ul);
......
index.html
View file @ 108d2b0f
...@@ -32,6 +32,7 @@ ...@@ -32,6 +32,7 @@
<li class="active"><a href="#getting-started">Getting Started</a></li> <li class="active"><a href="#getting-started">Getting Started</a></li>
<li><a href="#configuration-options">Configuration Options</a></li> <li><a href="#configuration-options">Configuration Options</a></li>
<li><a href="#templates">Templates</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="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li> <li><a href="#further-examples">Further Examples</a></li>
<li><a href="#post">Server-Side Processing</a></li> <li><a href="#post">Server-Side Processing</a></li>
...@@ -3071,6 +3072,62 @@ ...@@ -3071,6 +3072,62 @@
</pre> </pre>
</div> </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"> <div class="page-header">
<h2 id="methods">Methods</h2> <h2 id="methods">Methods</h2>
</div> </div>
......
tests/spec/bootstrap-multiselect.js
View file @ 108d2b0f
...@@ -409,14 +409,14 @@ describe('Bootstrap Multiselect "Collapsible Optgroups"', function() { ...@@ -409,14 +409,14 @@ describe('Bootstrap Multiselect "Collapsible Optgroups"', function() {
var $lis = $group.nextUntil('li.multiselect-group'); var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() { $lis.each(function() {
expect($(this).hasClass('hidden')).toBe(false); expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(false);
}); });
$('.caret-container', $group).click(); $('.caret-container', $group).click();
var $lis = $group.nextUntil('li.multiselect-group'); var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() { $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() { ...@@ -509,14 +509,14 @@ describe('Bootstrap Multiselect "Clickable+Collapsible Optgroups"', function() {
var $lis = $group.nextUntil('li.multiselect-group'); var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() { $lis.each(function() {
expect($(this).hasClass('hidden')).toBe(false); expect($(this).hasClass('multiselect-collapsible-hidden')).toBe(false);
}); });
$('.caret-container', $group).click(); $('.caret-container', $group).click();
var $lis = $group.nextUntil('li.multiselect-group'); var $lis = $group.nextUntil('li.multiselect-group');
$lis.each(function() { $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