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 @@ ...@@ -92,6 +92,8 @@
$('#example16').multiselect('select', option.val()); $('#example16').multiselect('select', option.val());
} }
}); });
$('#example19').multiselect();
}); });
</script> </script>
<p> <p>
...@@ -285,6 +287,30 @@ ...@@ -285,6 +287,30 @@
Using the <code>onChange</code> option to prevent user from deselecting selected options. Using the <code>onChange</code> option to prevent user from deselecting selected options.
</td> </td>
</tr> </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> </table>
<div class="page-header"> <div class="page-header">
<h1>Code</h1> <h1>Code</h1>
...@@ -305,6 +331,8 @@ ...@@ -305,6 +331,8 @@
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonClass: &apos;btn&apos;, buttonClass: &apos;btn&apos;,
buttonWidth: &apos;auto&apos;, buttonWidth: &apos;auto&apos;,
buttonContainer: &apos;&lt;div class=&quot;btn-group&quot; /&gt;&apos;,
maxHeight: false,
buttonText: function(options) { buttonText: function(options) {
if (options.length == 0) { if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;; return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
...@@ -413,6 +441,11 @@ ...@@ -413,6 +441,11 @@
}); });
}); });
</script> </script>
<style type="text/css">
.multiselect-group {
font-weight: bold;
}
</style>
<table class="table table-striped"> <table class="table table-striped">
<tbody> <tbody>
<tr> <tr>
...@@ -666,6 +699,10 @@ ...@@ -666,6 +699,10 @@
position: absolute; position: absolute;
right: 5px; right: 5px;
} }
.add-styling .multiselect-group {
font-weight: bold;
text-decoration: underline;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
...@@ -691,25 +728,36 @@ ...@@ -691,25 +728,36 @@
<tr> <tr>
<td> <td>
<select id="example15" multiple="multiple"> <select id="example15" multiple="multiple">
<option value="cheese">Cheese</option> <optgroup label="Mathematics">
<option value="tomatoes">Tomatoes</option> <option value="analysis">Analysis</option>
<option value="mozarella">Mozzarella</option> <option value="algebra">Linear Algebra</option>
<option value="mushrooms">Mushrooms</option> <option value="discrete">Discrete Mathematics</option>
<option value="pepperoni">Pepperoni</option> <option value="numerical">Numerical Analysis</option>
<option value="onions">Onions</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> </select>
</td> </td>
<td> <td>
Text alignment combined with fixed width. Text alignment combined with fixed width and bold, underlined text for option group headers.
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
.multiselect { .multiselect {
text-align: left; text-align: left;
} }
.multiselect b.caret { .multiselect b.caret {
float: right; float: right;
} }
.multiselect-group {
font-weight: bold;
text-decoration: underline;
}
</pre> </pre>
</td> </td>
</tr> </tr>
...@@ -717,10 +765,10 @@ ...@@ -717,10 +765,10 @@
</div> </div>
</p> </p>
<hr> <hr>
<div> <p>
&copy; 2012 &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> <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> </div>
</body> </body>
</html> </html>
\ No newline at end of file
js/bootstrap-multiselect.js
View file @ 28a9c6db
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
}); });
} }
this.buildDrowdown(select, this.options); this.buildDrowdown();
this.$select this.$select
.hide() .hide()
...@@ -113,18 +113,14 @@ ...@@ -113,18 +113,14 @@
buttonClass: 'btn', buttonClass: 'btn',
buttonWidth: 'auto', buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />', 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. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400, maxHeight: false,
showGroups: false,
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
}, },
constructor: Multiselect, constructor: Multiselect,
// Will build an dropdown element for the given option.
createOptionValue: function(element) { createOptionValue: function(element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$(element).attr('selected', 'selected'); $(element).attr('selected', 'selected');
...@@ -147,18 +143,22 @@ ...@@ -147,18 +143,22 @@
} }
}, },
buildDrowdown: function(select, options){ // Build the dropdown and bind event handling.
buildDrowdown: function() {
// Build the dropdown.
if ((this.options.showGroups) && ($('optgroup', this.$select).length > 0)) { if ($('optgroup', this.$select).length > 0) {
$('optgroup', this.$select).each($.proxy(function(index, group) { $('optgroup', this.$select).each($.proxy(function(index, group) {
var groupName = $(group).prop('label'); 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>'); $('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) { $('option', group).each($.proxy(function(index, element) {
this.createOptionValue(element); this.createOptionValue(element);
}, this)); }, this));
}, this)); }, this));
} else { }
else {
$('option', this.$select).each($.proxy(function(index, element) { $('option', this.$select).each($.proxy(function(index, element) {
this.createOptionValue(element); this.createOptionValue(element);
}, this)); }, this));
...@@ -218,6 +218,7 @@ ...@@ -218,6 +218,7 @@
$('button', this.$container).html(this.options.buttonText($('option:selected', this.$select))); $('button', this.$container).html(this.options.buttonText($('option:selected', this.$select)));
}, },
// Select an option by its value.
select: function(value) { select: function(value) {
var option = $('option[value="' + value + '"]', this.$select); var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container); var checkbox = $('ul li input[value="' + value + '"]', this.$container);
...@@ -232,6 +233,7 @@ ...@@ -232,6 +233,7 @@
$('button', this.$container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options));
}, },
// Deselect an option by its value.
deselect: function(value) { deselect: function(value) {
var option = $('option[value="' + value + '"]', this.$select); var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container); var checkbox = $('ul li input[value="' + value + '"]', this.$container);
...@@ -246,6 +248,7 @@ ...@@ -246,6 +248,7 @@
$('button', this.$container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options));
}, },
// Rebuild the whole dropdown menu.
rebuild: function() { rebuild: function() {
$('ul', this.$container).html(''); $('ul', this.$container).html('');
this.buildDrowdown(this.$select, this.options); this.buildDrowdown(this.$select, this.options);
...@@ -261,11 +264,13 @@ ...@@ -261,11 +264,13 @@
return this.each(function () { return this.each(function () {
var data = $(this).data('multiselect'), var data = $(this).data('multiselect'),
options = typeof option == 'object' && option; options = typeof option == 'object' && option;
// Initialize the multiselect.
if (!data) { if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options))); $(this).data('multiselect', (data = new Multiselect(this, options)));
} }
// Call multiselect method.
if (typeof option == 'string') { if (typeof option == 'string') {
data[option](parameter); 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