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 @@ ...@@ -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. 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"> <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 ...@@ -12,40 +14,25 @@ Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user inte
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('#example1').multiselect();
'button': 'btn', $('#example2').multiselect();
'width': 'auto', $('#example3').multiselect({
'text': function(options) { button: 'btn btn-link'
if (options.length == 0) { });
return 'None selected'; $('#example4').multiselect({
} button: 'btn btn-small'
else if (options.length > 3) { });
return options.length + ' selected'; $('#example5').multiselect({
} button: 'btn btn-primary disabled'
else { });
var selected = ''; $('#example6').multiselect();
options.each(function() { $('.example7').multiselect({
selected += $(this).text() + ', '; container: '<span class="dropdown" />',
});
return selected.substr(0, selected.length -2);
}
}
}); });
}); });
</script> </script>
<p>
<select class="multiselect" multiple="multiple"> <select id="example1" 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>
<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="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option> <option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option> <option value="mozarella">Mozzarella</option>
...@@ -53,13 +40,72 @@ Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user inte ...@@ -53,13 +40,72 @@ Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user inte
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
<button class="btn btn-danger">Cancel</button> </p>
<button class="btn btn-success">Save</button> <p>
</div> <select id="example3" class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option>
## Examples <option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
The download includes usage and styling examples. <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 ## Configuration Options
...@@ -113,6 +159,14 @@ Defining the text of the button. Must be a function returning a string. All curr ...@@ -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 ## License
Copyright 2012 David Stutz Copyright 2012 David Stutz
......
index.html
View file @ 9a74bd88
...@@ -24,6 +24,9 @@ ...@@ -24,6 +24,9 @@
<div class="page-header"> <div class="page-header">
<h1>Examples</h1> <h1>Examples</h1>
</div> </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"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example1').multiselect(); $('#example1').multiselect();
...@@ -38,7 +41,9 @@ ...@@ -38,7 +41,9 @@
button: 'btn btn-primary disabled' button: 'btn btn-primary disabled'
}); });
$('#example6').multiselect(); $('#example6').multiselect();
$('.example7').multiselect(); $('.example7').multiselect({
container: '<span class="dropdown" />',
});
}); });
</script> </script>
<table class="table table-striped"> <table class="table table-striped">
...@@ -69,8 +74,7 @@ ...@@ -69,8 +74,7 @@
</select> </select>
</td> </td>
<td> <td>
As link using <code>btn btn-link</code>. As link using <code>button: 'btn btn-link'</code>.
</ul>
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -85,7 +89,7 @@ ...@@ -85,7 +89,7 @@
</select> </select>
</td> </td>
<td> <td>
Small button using <code>btn btn-small</code>. Small button using <code>button: 'btn btn-small'</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -100,12 +104,12 @@ ...@@ -100,12 +104,12 @@
</select> </select>
</td> </td>
<td> <td>
Disabled using <code>btn btn-primary disabled</code>. Disabled using <code>button: 'btn btn-primary disabled'</code>.
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <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> <span class="add-on"><b class="icon-list-alt"></b></span>
<select id="example6" class="multiselect" multiple="multiple"> <select id="example6" class="multiselect" multiple="multiple">
<option value="cheese">Cheese</option> <option value="cheese">Cheese</option>
...@@ -120,7 +124,7 @@ ...@@ -120,7 +124,7 @@
</div> </div>
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>
...@@ -145,7 +149,7 @@ ...@@ -145,7 +149,7 @@
</div> </div>
</td> </td>
<td> <td>
Multiple selects within a group. Multiple selects within a group using <code>container: '&lt;span class="dropdown" /&gt;'</code>.
</td> </td>
</tr> </tr>
</table> </table>
...@@ -216,7 +220,7 @@ ...@@ -216,7 +220,7 @@
<thead> <thead>
<tr> <tr>
<th>Option</th> <th>Option</th>
<th width="40%">Explanation</th> <th width="30%">Explanation</th>
<th>Usage</th> <th>Usage</th>
</tr> </tr>
</thead> </thead>
...@@ -252,7 +256,7 @@ ...@@ -252,7 +256,7 @@
</tr> </tr>
<tr> <tr>
<td><code>button</code></td> <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> <td>
<pre> <pre>
&lt;script type=&quot;text/javascript&quot;&gt; &lt;script type=&quot;text/javascript&quot;&gt;
...@@ -268,7 +272,7 @@ ...@@ -268,7 +272,7 @@
<tr> <tr>
<td><code>width</code></td> <td><code>width</code></td>
<td> <td>
The width of the dropdown button. The width of the dropdown button. Default: <code>auto</code>.
Allowed formats: Allowed formats:
<ul> <ul>
<li><code>100px</code></li> <li><code>100px</code></li>
...@@ -284,6 +288,23 @@ ...@@ -284,6 +288,23 @@
&apos;width&apos;: &apos;300px&apos;, &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; &lt;/script&gt;
</pre> </pre>
</td> </td>
......
js/bootstrap-multiselect.js
View file @ 9a74bd88
...@@ -38,14 +38,20 @@ ...@@ -38,14 +38,20 @@
}); });
return selected.substr(0, selected.length -2); return selected.substr(0, selected.length -2);
} }
} },
container: '<div class="btn-group" />',
}; };
options = $.extend(defaults, options); options = $.extend(defaults, options);
var select = element, 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')) { if (!$(select).attr('multiple')) {
$(select).attr('multiple', true); $(select).attr('multiple', true);
} }
...@@ -55,10 +61,10 @@ ...@@ -55,10 +61,10 @@
$(this).attr('selected', true); $(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, var selected = $(this).attr('selected') || false,
checkbox = $('li input[value="' + $(this).val() + '"]', container); checkbox = $('li input[value="' + $(this).val() + '"]', ul);
checkbox.attr('checked', selected); checkbox.attr('checked', selected);
...@@ -70,11 +76,9 @@ ...@@ -70,11 +76,9 @@
$(select).hide() $(select).hide()
.after(container); .after(container);
$('.dropdown-toggle', container).dropdown(); $('li label', ul).css({'cursor': 'pointer'});
$('li label', container).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; var checked = $(this).attr('checked') || false;
if (checked) { if (checked) {
...@@ -86,10 +90,10 @@ ...@@ -86,10 +90,10 @@
$('option[value="' + $(this).val() + '"]', select).attr('selected', checked); $('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(); 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