Skip to content

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

First commit with README.

parents
Expand all Show whitespace changes
Inline Side-by-side
Showing with 428 additions and 0 deletions
README.md 0 → 100644
View file @ 483d2a4a
# Bootstrap Multiselect
Dropdown button overlay for using with selects.
## Example
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect(options);
});
</script>
<select 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>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select 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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
## Configuration Options
**none**
The text displayed if no option is selected.
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
});
});
</script>
**selected**
A function returning the string displayed if options are selected. All currently selected options are passed as argument.
<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);
}
},
});
});
</script>
**width**
The width of the dropdown button.
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
'width': '300px', // In pixels
'width': '50%', // In percentage
});
});
</script>
## License
[Apache License v2.0](http://www.apache.org/licenses/LICENSE-2.0)
css/bootstrap-responsive.min.css 0 → 100644
View file @ 483d2a4a
This diff is collapsed.
css/bootstrap.min.css 0 → 100644
View file @ 483d2a4a
This source diff could not be displayed because it is too large. You can view the blob instead.
index.html 0 → 100644
View file @ 483d2a4a
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Multiselect</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="RS Computer" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-responsive.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>
</head>
<body>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
Dropdown button overlay for selects.
</p>
</div>
<div class="page-header">
<h1>Examples</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.multiselect').multiselect({
width: 'auto',
});
});
</script>
<table class="table table-striped">
<tr>
<td>
<select class="multiselect">
<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>
Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically.
</td>
</tr>
<tr>
<td>
<select 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>
Simple multiple select.
</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">
<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>
<button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button>
</div>
</td>
<td>
Multiple select within a group with add-ons.
</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">
<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>
<select class="multiselect" multiple="multiple">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
</div>
</td>
<td>
Multiple selects within a group.
</td>
</tr>
</table>
<div class="page-header">
<h1>Code</h1>
</div>
<p>
Basic markup used in the above examples:
</p>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect();
});
&lt;/script&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;div class=&quot;input-prepend input-append&quot;&gt;
&lt;span class=&quot;add-on&quot;&gt;&lt;b class=&quot;icon-list-alt&quot;&gt;&lt;/b&gt;&lt;/span&gt;
&lt;select class=&quot;multiselect&quot; multiple=&quot;multiple&quot;&gt;
&lt;option value=&quot;cheese&quot;&gt;Cheese&lt;/option&gt;
&lt;option value=&quot;tomatoes&quot;&gt;Tomatoes&lt;/option&gt;
&lt;option value=&quot;mozarella&quot;&gt;Mozzarella&lt;/option&gt;
&lt;option value=&quot;mushrooms&quot;&gt;Mushrooms&lt;/option&gt;
&lt;option value=&quot;pepperoni&quot;&gt;Pepperoni&lt;/option&gt;
&lt;option value=&quot;onions&quot;&gt;Onions&lt;/option&gt;
&lt;/select&gt;
&lt;button class=&quot;btn btn-danger&quot;&gt;Cancel&lt;/button&gt;
&lt;button class=&quot;btn btn-success&quot;&gt;Save&lt;/button&gt;
&lt;/div&gt;
</pre>
<div class="page-header">
<h1>Options</h1>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Option</th>
<th width="40%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>none</code></td>
<td>The text displayed if no option is selected.</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;
});
});
&lt;/script&gt;
</pre>
</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>
<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);
}
},
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>width</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;width&apos;: &apos;auto&apos;, // Default
&apos;width&apos;: &apos;300px&apos;, // In pixels
&apos;width&apos;: &apos;50%&apos;, // In percentage
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<hr>
<div>
&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>
</div>
</body>
</html>
\ No newline at end of file
js/bootstrap-multiselect.js 0 → 100644
View file @ 483d2a4a
/**
* bootstrap-multiselect.js 1.0.0
* https://github.com/davidstutz/bootstrap-multiselect
*
* Copyright 2012 David Stutz
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
!function ($) {
"use strict"; // jshint ;_;
var Multiselect = function(element, 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();
if (!$(select).attr('multiple')) {
$(select).attr('multiple', true);
}
$('option', select).each(function() {
if ($(this).is(':selected')) {
$(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() {
var selected = $(this).attr('selected') || false,
checkbox = $('li input[value="' + $(this).val() + '"]', button);
checkbox.attr('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
});
$('.dropdown-toggle', button).dropdown();
$('li label', button).css({'cursor': 'pointer'});
$('li input[type="checkbox"]', button).on('change', function(event) {
var checked = $(this).attr('checked') || false;
if (checked) {
$(this).parents('li').addClass('active');
}
else {
$(this).parents('li').removeClass('active');
}
$('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>');
});
$('li a', button).on('click', function(event) {
event.stopImmediatePropagation();
});
};
$.fn.multiselect = function (options) {
return this.each(function () {
var data = $(this).data('multiselect');
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
});
}
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
js/bootstrap.min.js 0 → 100644
View file @ 483d2a4a
This diff is collapsed.
js/jquery.min.js 0 → 100644
View file @ 483d2a4a
This diff is collapsed.
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