Skip to content

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

Added container option.

parent 246fd64f
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 61 deletions
README.md
View file @ 9a74bd88
......@@ -2,7 +2,9 @@
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.
## Usage
## Examples
These examples can also be seen in action in index.html:
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
......@@ -12,40 +14,25 @@ Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user inte
<script type="text/javascript">
$(document).ready(function() {
$('.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);
}
}
$('#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({
container: '<span class="dropdown" />',
});
});
</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">
<p>
<select id="example1" class="multiselect">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -53,13 +40,72 @@ Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user inte
<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>
## Examples
The download includes usage and styling examples.
</p>
<p>
<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>
</p>
<p>
<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>
</p>
<p>
<select id="example5" 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>
</p>
<p>
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select id="example6" 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>
</p>
<p>
<div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" 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="example7" 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>
</p>
## Configuration Options
......@@ -113,6 +159,14 @@ Defining the text of the button. Must be a function returning a string. All curr
});
});
**container**
The used container holding both the dropdown button and the dropdown menu.
$('.multiselect').multiselect({
container: '<span class="dropdown" />',
});
## License
Copyright 2012 David Stutz
......
index.html
View file @ 9a74bd88
......@@ -24,6 +24,9 @@
<div class="page-header">
<h1>Examples</h1>
</div>
<p>
The best way learning from the examples is using firebug, chrome developer tools or similar tools for your browser. Examine the generated markup and used javascript code.
</p>
<script type="text/javascript">
$(document).ready(function() {
$('#example1').multiselect();
......@@ -38,7 +41,9 @@
button: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
});
});
</script>
<table class="table table-striped">
......@@ -69,8 +74,7 @@
</select>
</td>
<td>
As link using <code>btn btn-link</code>.
</ul>
As link using <code>button: 'btn btn-link'</code>.
</td>
</tr>
<tr>
......@@ -85,7 +89,7 @@
</select>
</td>
<td>
Small button using <code>btn btn-small</code>.
Small button using <code>button: 'btn btn-small'</code>.
</td>
</tr>
<tr>
......@@ -100,12 +104,12 @@
</select>
</td>
<td>
Disabled using <code>btn btn-primary disabled</code>.
Disabled using <code>button: 'btn btn-primary disabled'</code>.
</td>
</tr>
<tr>
<td>
<div class="input-prepend input-append">
<div class="input-prepend input-append btn-toolbar">
<span class="add-on"><b class="icon-list-alt"></b></span>
<select id="example6" class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
......@@ -120,7 +124,7 @@
</div>
</td>
<td>
Multiple select within a group with add-ons.
Multiple select within a group with add-ons and default container for the plugin: <code>container: '&lt;div class="btn-group" /&gt;'</code>.
</td>
</tr>
<tr>
......@@ -145,7 +149,7 @@
</div>
</td>
<td>
Multiple selects within a group.
Multiple selects within a group using <code>container: '&lt;span class="dropdown" /&gt;'</code>.
</td>
</tr>
</table>
......@@ -216,7 +220,7 @@
<thead>
<tr>
<th>Option</th>
<th width="40%">Explanation</th>
<th width="30%">Explanation</th>
<th>Usage</th>
</tr>
</thead>
......@@ -252,7 +256,7 @@
</tr>
<tr>
<td><code>button</code></td>
<td>The width of the dropdown button.</td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
......@@ -268,7 +272,7 @@
<tr>
<td><code>width</code></td>
<td>
The width of the dropdown button.
The width of the dropdown button. Default: <code>auto</code>.
Allowed formats:
<ul>
<li><code>100px</code></li>
......@@ -284,6 +288,23 @@
&apos;width&apos;: &apos;300px&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>container</code></td>
<td>
The used container holding both the dropdown button and the dropdown menu. Default: <code>&lt;div class="btn-group" /&gt;</code>.
</td>
<td>
<pre>
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
&apos;container&apos;: &apos;&lt;span class="dropdown" /&gt;&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
......
js/bootstrap-multiselect.js
View file @ 9a74bd88
......@@ -38,14 +38,20 @@
});
return selected.substr(0, selected.length -2);
}
}
},
container: '<div class="btn-group" />',
};
options = $.extend(defaults, options);
var select = element,
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>');
button = $('<button style="width:' + options.width + '" class="dropdown-toggle ' + options.button + '" data-toggle="dropdown">' + options.text($('option:selected', select)) + ' <b class="caret"></b></button>')
.dropdown(),
ul = $('<ul class="dropdown-menu"></ul>'),
container = $(options.container)
.append(button)
.append(ul);
if (!$(select).attr('multiple')) {
$(select).attr('multiple', true);
}
......@@ -55,10 +61,10 @@
$(this).attr('selected', true);
}
$('ul', container).append('<li><a href="#"><label class="checkbox"><input type="checkbox" value="' + $(this).val() + '"> ' + $(this).text() + '</label></a></li>');
$(ul).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() + '"]', container);
checkbox = $('li input[value="' + $(this).val() + '"]', ul);
checkbox.attr('checked', selected);
......@@ -70,11 +76,9 @@
$(select).hide()
.after(container);
$('.dropdown-toggle', container).dropdown();
$('li label', container).css({'cursor': 'pointer'});
$('li label', ul).css({'cursor': 'pointer'});
$('li input[type="checkbox"]', container).on('change', function(event) {
$('li input[type="checkbox"]', ul).on('change', function(event) {
var checked = $(this).attr('checked') || false;
if (checked) {
......@@ -86,10 +90,10 @@
$('option[value="' + $(this).val() + '"]', select).attr('selected', checked);
$('.dropdown-toggle', container).html(options.text($('option:selected', select)) + ' <b class="caret"></b>');
$(button).html(options.text($('option:selected', select)) + ' <b class="caret"></b>');
});
$('li a', container).on('click', function(event) {
$('li a', ul).on('click', function(event) {
event.stopImmediatePropagation();
});
};
......
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