Skip to content

B
bootstrap-multiselect
Commit 28a9c6db authored by David Stutz's avatar David Stutz
Browse files
Options

Added option group example. 

Added example for option group support and removed option "showGroups".
parent 1a8a6c67
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 30 deletions
index.html
View file @ 28a9c6db
......@@ -92,6 +92,8 @@
$('#example16').multiselect('select', option.val());
}
});
$('#example19').multiselect();
});
</script>
<p>
......@@ -285,6 +287,30 @@
Using the <code>onChange</code> option to prevent user from deselecting selected options.
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example19" multiple="multiple">
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</div>
</td>
<td>
Option groups are detected automatically and for each option group an header element is added: <code>&lt;optgroup label=&quot;Mathematics&quot;&gt;...&lt;/optgroup&gt;</code>
</td>
</tr>
</table>
<div class="page-header">
<h1>Code</h1>
......@@ -305,6 +331,8 @@
$(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn&apos;,
buttonWidth: &apos;auto&apos;,
buttonContainer: &apos;&lt;div class=&quot;btn-group&quot; /&gt;&apos;,
maxHeight: false,
buttonText: function(options) {
if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
......@@ -413,6 +441,11 @@
});
});
</script>
<style type="text/css">
.multiselect-group {
font-weight: bold;
}
</style>
<table class="table table-striped">
<tbody>
<tr>
......@@ -666,6 +699,10 @@
position: absolute;
right: 5px;
}
.add-styling .multiselect-group {
font-weight: bold;
text-decoration: underline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
......@@ -691,25 +728,36 @@
<tr>
<td>
<select id="example15" 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>
<optgroup label="Mathematics">
<option value="analysis">Analysis</option>
<option value="algebra">Linear Algebra</option>
<option value="discrete">Discrete Mathematics</option>
<option value="numerical">Numerical Analysis</option>
<option value="probability">Probability Theory</option>
</optgroup>
<optgroup label="Computer Science">
<option value="programming">Introduction to Programming</option>
<option value="automata">Automata Theory</option>
<option value="complexity">Complexity Theory</option>
<option value="software">Software Engineering</option>
</optgroup>
</select>
</td>
<td>
Text alignment combined with fixed width.
Text alignment combined with fixed width and bold, underlined text for option group headers.
</td>
<td>
<pre class="prettyprint linenums">
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
.multiselect-group {
font-weight: bold;
text-decoration: underline;
}
</pre>
</td>
</tr>
......@@ -717,10 +765,10 @@
</div>
</p>
<hr>
<div>
<p>
&copy; 2012
<a href="http://davidstutz.de">David Stutz</a> - <a href="http://www.apache.org/licenses/LICENSE-2.0">Apache License v2.0</a>
</div>
</p>
</div>
</body>
</html>
\ No newline at end of file
js/bootstrap-multiselect.js
View file @ 28a9c6db
......@@ -78,7 +78,7 @@
});
}
this.buildDrowdown(select, this.options);
this.buildDrowdown();
this.$select
.hide()
......@@ -113,18 +113,14 @@
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// Maximum height of the dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400,
showGroups: false,
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
maxHeight: false,
},
constructor: Multiselect,
// Will build an dropdown element for the given option.
createOptionValue: function(element) {
if ($(element).is(':selected')) {
$(element).attr('selected', 'selected');
......@@ -147,18 +143,22 @@
}
},
buildDrowdown: function(select, options){
// Build the dropdown.
if ((this.options.showGroups) && ($('optgroup', this.$select).length > 0)) {
// Build the dropdown and bind event handling.
buildDrowdown: function() {
if ($('optgroup', this.$select).length > 0) {
$('optgroup', this.$select).each($.proxy(function(index, group) {
var groupName = $(group).prop('label');
// Add a header for the group.
$('ul', this.$container).append('<li><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;" class="multiselect-group"> ' + groupName + '</label></li>');
// Add the options of the group.
$('option', group).each($.proxy(function(index, element) {
this.createOptionValue(element);
}, this));
}, this));
} else {
}
else {
$('option', this.$select).each($.proxy(function(index, element) {
this.createOptionValue(element);
}, this));
......@@ -218,6 +218,7 @@
$('button', this.$container).html(this.options.buttonText($('option:selected', this.$select)));
},
// Select an option by its value.
select: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
......@@ -232,6 +233,7 @@
$('button', this.$container).html(this.options.buttonText(options));
},
// Deselect an option by its value.
deselect: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
......@@ -246,6 +248,7 @@
$('button', this.$container).html(this.options.buttonText(options));
},
// Rebuild the whole dropdown menu.
rebuild: function() {
$('ul', this.$container).html('');
this.buildDrowdown(this.$select, this.options);
......@@ -261,11 +264,13 @@
return this.each(function () {
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
// Initialize the multiselect.
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
// Call multiselect method.
if (typeof option == 'string') {
data[option](parameter);
}
......
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