Skip to content

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

Added button customization and updated options. 

The dropdown butotn can now be customized by using classes. Removed the
'none' option and renamed the 'selected' option to 'text'.
parent 92cf6a69
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 107 deletions
README.md
View file @ f4cee27a
# Bootstrap Multiselect
Dropdown button overlay for using with selects.
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
## Example
## Usage
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect(options);
$('.multiselect').multiselect({
'button': 'btn',
'width': 'auto',
'text': function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
}
});
});
</script>
......@@ -33,56 +57,61 @@ Dropdown button overlay for using with selects.
<button class="btn btn-success">Save</button>
</div>
## Examples
The download includes usage and styling examples.
## Configuration Options
**none**
**button**
The text displayed if no option is selected.
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
</script>
});
**selected**
**width**
A function returning the string displayed if options are selected. All currently selected options are passed as argument.
The width of the dropdown button.
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'selected': function(options) {
if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
});
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
});
</script>
});
The width can be defined using all formats accepted by CSS:
100px
50%
auto
**width**
**text**
The width of the dropdown button.
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
'width': '300px', // In pixels
'width': '50%', // In percentage
});
$(document).ready(function() {
$('.multiselect').multiselect({
'text': function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
});
</script>
});
## License
......
index.html
View file @ f4cee27a
......@@ -18,7 +18,7 @@
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
Dropdown button overlay for selects.
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
</p>
</div>
<div class="page-header">
......@@ -26,15 +26,25 @@
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
width: 'auto',
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect();
});
</script>
<table class="table table-striped">
<tr>
<td>
<select class="multiselect">
<select id="example1" class="multiselect">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -49,7 +59,38 @@
</tr>
<tr>
<td>
<select class="multiselect" multiple="multiple">
<select id="example3" class="multiselect" 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>
</select>
</td>
<td>
As link using <code>btn btn-link</code>.
</ul>
</td>
</tr>
<tr>
<td>
<select id="example4" class="multiselect" 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>
</select>
</td>
<td>
Small button using <code>btn btn-small</code>.
</td>
</tr>
<tr>
<td>
<select id="example5" class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -59,14 +100,14 @@
</select>
</td>
<td>
Simple multiple select.
Disabled using <code>btn btn-primary disabled</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="multiselect" multiple="multiple">
<select id="example6" class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -86,7 +127,7 @@
<td>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="multiselect" multiple="multiple">
<select class="example7" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -94,7 +135,7 @@
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<select class="multiselect" multiple="multiple">
<select class="example7" multiple="multiple">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
......@@ -115,9 +156,33 @@
Basic markup used in the above examples:
</p>
<pre>
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;js/bootstrap-multiselect.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect();
$(&#39;.multiselect&#39;).multiselect({
&apos;button&apos;: &apos;btn&apos;,
&apos;width&apos;: &apos;auto&apos;,
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
......@@ -157,14 +222,28 @@
</thead>
<tbody>
<tr>
<td><code>none</code></td>
<td>The text displayed if no option is selected.</td>
<td><code>text</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;none&apos;: &apos;select something...&apos;
&apos;text&apos;: function(options) {
if (options.length == 0) {
return &apos;None selected&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
}
});
});
&lt;/script&gt;
......@@ -172,25 +251,14 @@
</td>
</tr>
<tr>
<td><code>selected</code></td>
<td>A function returning the string displayed if options are selected. All currently selected options are passed as argument.</td>
<td><code>button</code></td>
<td>The width of the dropdown button.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;selected&apos;: function(options) {
if (options.length > 3) {
return options.length + &apos; selected&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2);
}
},
&apos;button&apos;: &apos;btn-primary btn-large&apos;,
});
});
&lt;/script&gt;
......@@ -199,15 +267,21 @@
</tr>
<tr>
<td><code>width</code></td>
<td>The width of the dropdown button.</td>
<td>
The width of the dropdown button.
Allowed formats:
<ul>
<li><code>100px</code></li>
<li><code>50%</code></li>
<li><code>auto</code></li>
</ul>
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;width&apos;: &apos;auto&apos;, // Default
&apos;width&apos;: &apos;300px&apos;, // In pixels
&apos;width&apos;: &apos;50%&apos;, // In percentage
&apos;width&apos;: &apos;300px&apos;,
});
});
&lt;/script&gt;
......
js/bootstrap-multiselect.js
View file @ f4cee27a
......@@ -21,11 +21,30 @@
"use strict"; // jshint ;_;
var Multiselect = function(element, options) {
var defaults = {
button: 'btn',
width: 'auto',
text: function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
}
};
options = $.extend(defaults, options);
var select = element,
options = $.extend($.fn.multiselect.options, options),
button = $('<span class="dropdown"><a style="width:' + options.width + '" class="btn dropdown-toggle" data-toggle="dropdown">' + ($('option:selected', select).length > 0 ? $.fn.multiselect.options.selected($('option:selected', select)) : $.fn.multiselect.options.none) + ' <b class="caret"></b></a><ul class="dropdown-menu" role="menu"></ul></span>');
$(select).hide();
container = $('<span class="dropdown"><a style="width:' + options.width + '" class="dropdown-toggle ' + options.button + '" data-toggle="dropdown">' + options.text($('option:selected', select)) + ' <b class="caret"></b></a><ul class="dropdown-menu" role="menu"></ul></span>');
if (!$(select).attr('multiple')) {
$(select).attr('multiple', true);
......@@ -36,14 +55,10 @@
$(this).attr('selected', true);
}
$('ul', button).append('<li><a href="#"><label class="checkbox"><input type="checkbox" value="' + $(this).val() + '"> ' + $(this).text() + '</label></a></li>');
});
$(select).after(button);
$('option', select).each(function() {
$('ul', container).append('<li><a href="#"><label class="checkbox"><input type="checkbox" value="' + $(this).val() + '"> ' + $(this).text() + '</label></a></li>');
var selected = $(this).attr('selected') || false,
checkbox = $('li input[value="' + $(this).val() + '"]', button);
checkbox = $('li input[value="' + $(this).val() + '"]', container);
checkbox.attr('checked', selected);
......@@ -52,11 +67,14 @@
}
});
$('.dropdown-toggle', button).dropdown();
$(select).hide()
.after(container);
$('.dropdown-toggle', container).dropdown();
$('li label', button).css({'cursor': 'pointer'});
$('li label', container).css({'cursor': 'pointer'});
$('li input[type="checkbox"]', button).on('change', function(event) {
$('li input[type="checkbox"]', container).on('change', function(event) {
var checked = $(this).attr('checked') || false;
if (checked) {
......@@ -68,10 +86,10 @@
$('option[value="' + $(this).val() + '"]', select).attr('selected', checked);
$('.dropdown-toggle', button).html(($('option:selected', select).length > 0 ? $.fn.multiselect.options.selected($('option:selected', select)) : $.fn.multiselect.options.none) + ' <b class="caret"></b>');
$('.dropdown-toggle', container).html(options.text($('option:selected', select)) + '<b class="caret"></b>');
});
$('li a', button).on('click', function(event) {
$('li a', container).on('click', function(event) {
event.stopImmediatePropagation();
});
};
......@@ -87,25 +105,5 @@
}
Multiselect.prototype.constructor = Multiselect;
$.fn.multiselect.options = {
// The width of the button.
width: 'auto',
// Text for button if no option is selected.
none: 'None selected',
// Must be a function returning the label for the button.
selected: function(options) {
if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
}
}(window.jQuery);
\ No newline at end of file
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