Skip to content

B
bootstrap-multiselect
Commit ab01734d authored by Chris Hynes's avatar Chris Hynes
Browse files
Options

Merge branch 'master' of https://github.com/davidstutz/bootstrap-multiselect

parents 531a3cde 2f3a71cc
Show whitespace changes
Inline Side-by-side
Showing with 325 additions and 280 deletions
README.md
View file @ ab01734d
...@@ -156,11 +156,11 @@ If the width is defined using CSS the option should be set to false. ...@@ -156,11 +156,11 @@ If the width is defined using CSS the option should be set to false.
**buttonText** **buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter. Defining the text of the button. Must be a function returning a string. All currently selected options and the select are passed as parameter.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
buttonText: function(options) { buttonText: function(options, select) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected <b class="caret"></b>'; return 'None selected <b class="caret"></b>';
} }
......
index.html
View file @ ab01734d
...@@ -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>
...@@ -532,13 +565,13 @@ ...@@ -532,13 +565,13 @@
<tbody> <tbody>
<tr> <tr>
<td><code>buttonText</code></td> <td><code>buttonText</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td> <td>A function returning the string displayed if options are selected. All currently selected options and the select are passed as argument. In addition HTML can be added to the button, for example the caret icon seen in the examples.</td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() { $(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({ $(&#39;.multiselect&#39;).multiselect({
buttonText: function(options) { buttonText: function(options, select) {
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;;
} }
...@@ -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 @ ab01734d
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
} }
function Multiselect(select, options) { function Multiselect(select, options) {
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.$select = $(select); this.$select = $(select);
...@@ -59,7 +60,7 @@ ...@@ -59,7 +60,7 @@
} }
this.$container = $(this.options.buttonContainer) this.$container = $(this.options.buttonContainer)
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>') .append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select), this.$select) + '</button>')
.append('<ul class="dropdown-menu"></ul>'); .append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) { if (this.options.buttonWidth) {
...@@ -77,7 +78,7 @@ ...@@ -77,7 +78,7 @@
}); });
} }
this.buildDropdown(select, this.options); this.buildDrowdown();
this.$select this.$select
.hide() .hide()
...@@ -90,7 +91,7 @@ ...@@ -90,7 +91,7 @@
// Default text function will either print 'None selected' in case no option is selected, // Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options. // or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed. // If more than 3 options are selected, the number of selected options is printed.
buttonText: function(options) { buttonText: function(options, select) {
if (options.length == 0) { if (options.length == 0) {
return 'None selected <b class="caret"></b>'; return 'None selected <b class="caret"></b>';
} }
...@@ -107,31 +108,26 @@ ...@@ -107,31 +108,26 @@
}, },
// Is triggered on change of the selected options. // Is triggered on change of the selected options.
onChange: function(option, checked) { onChange: function(option, checked) {
}, },
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,
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
}, },
constructor: Multiselect, constructor: Multiselect,
buildDropdown: function(select, options){ // Will build an dropdown element for the given option.
createOptionValue: function(element) {
// Build the dropdown.
$('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) { if ($(element).is(':selected')) {
$(element).attr('selected', 'selected'); $(element).attr('selected', 'selected');
$(element).prop('selected', 'selected'); $(element).prop('selected', 'selected');
} }
$('ul', this.$container).append('<li><a href="javascript:void(0);" style="padding:0;" tabindex="-1"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" tabindex="-1" /> ' + $(element).text() + '</label></a></li>'); $('ul', this.$container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label></a></li>');
var selected = $(element).prop('selected') || false; var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container);
...@@ -141,12 +137,44 @@ ...@@ -141,12 +137,44 @@
} }
checkbox.prop('checked', selected); checkbox.prop('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
},
// 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));
}, this));
}
else {
$('option', this.$select).each($.proxy(function(index, element) {
this.createOptionValue(element);
}, this));
}
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('ul li input[type="checkbox"]', this.$container).on('change', $.proxy(function(event) { $('ul li input[type="checkbox"]', this.$container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false; var checked = $(event.target).prop('checked') || false;
if (checked) {
$(event.target).parents('li').addClass('active');
}
else {
$(event.target).parents('li').removeClass('active');
}
var option = $('option[value="' + $(event.target).val() + '"]', this.$select); var option = $('option[value="' + $(event.target).val() + '"]', this.$select);
if (checked) { if (checked) {
...@@ -158,7 +186,7 @@ ...@@ -158,7 +186,7 @@
} }
var options = $('option:selected', this.$select); var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options, this.$select));
this.options.onChange(option, checked); this.options.onChange(option, checked);
}, this)); }, this));
...@@ -166,44 +194,6 @@ ...@@ -166,44 +194,6 @@
$('ul li a', this.$container).on('click', function(event) { $('ul li a', this.$container).on('click', function(event) {
event.stopPropagation(); event.stopPropagation();
}); });
this.$container.on('keydown', function(e) {
if ((e.keyCode == 9 || e.keyCode == 27) && $(this).hasClass('open'))
{
// close on tab or escape
$(this).find(".multiselect.dropdown-toggle").click();
}
else
{
var $items = $(this).find("li:not(.divider):visible a");
if (!$items.length)
return;
var index = $items.index($items.filter(':focus'));
if (e.keyCode == 38 && index > 0) // up
index--;
else if (e.keyCode == 40 && index < $items.length - 1) // down
index++;
else if (!~index)
index = 0;
var $current = $items.eq(index);
$current.focus();
if (e.keyCode == 32 || e.keyCode == 13)
{
var $checkbox = $current.find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"));
}
e.stopPropagation();
e.preventDefault();
}
});
}, },
// Destroy - unbind - the plugin. // Destroy - unbind - the plugin.
...@@ -225,38 +215,43 @@ ...@@ -225,38 +215,43 @@
} }
}, this)); }, this));
$('button', this.$container).html(this.options.buttonText($('option:selected', this.$select))); $('button', this.$container).html(this.options.buttonText($('option:selected', this.$select), 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);
checkbox.parents('li').addClass('active');
checkbox.prop('checked', true); checkbox.prop('checked', true);
option.attr('selected', 'selected'); option.attr('selected', 'selected');
option.prop('selected', 'selected'); option.prop('selected', 'selected');
var options = $('option:selected', this.$select); var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options, this.$select));
}, },
// 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);
checkbox.parents('li').removeClass('active');
checkbox.prop('checked', false); checkbox.prop('checked', false);
option.removeAttr('selected'); option.removeAttr('selected');
option.removeProp('selected'); option.removeProp('selected');
var options = $('option:selected', this.$select); var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options)); $('button', this.$container).html(this.options.buttonText(options, this.$select));
}, },
// Rebuild the whole dropdown menu.
rebuild: function() { rebuild: function() {
$('ul', this.$container).html(''); $('ul', this.$container).html('');
this.buildDropdown(this.$select, this.options); this.buildDrowdown(this.$select, this.options);
}, },
// Get options by merging defaults and given options. // Get options by merging defaults and given options.
...@@ -270,10 +265,12 @@ ...@@ -270,10 +265,12 @@
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