Skip to content

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

Added CSS class and added mobile "support". 

Added the CSS class "multiselect" do add additional styling using CSS.
Fixed #23. Added a possible solution for mobile devices.
parent 494f4d0a
Hide whitespace changes
Inline Side-by-side
Showing with 502 additions and 379 deletions
README.md
View file @ efdc63a9
# Bootstrap Multiselect # Bootstrap Multiselect
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.
**Note:** The option names may have changed due to the latest updates. **Note:** The option names may have changed due to the latest updates.
## Demo ## Demo
A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/). A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/).
## Examples ## Examples
These examples can also be seen in action in index.html: 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">
<link rel="stylesheet" href="css/bootstrap-responsive.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/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.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" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example1').multiselect(); $('#example1').multiselect();
$('#example2').multiselect(); $('#example2').multiselect();
$('#example3').multiselect({ $('#example3').multiselect({
buttonClass: 'btn btn-link' buttonClass: 'btn btn-link'
}); });
$('#example4').multiselect({ $('#example4').multiselect({
buttonClass: 'btn btn-small' buttonClass: 'btn btn-small'
}); });
$('#example5').multiselect({ $('#example5').multiselect({
buttonClass: 'btn btn-primary disabled' buttonClass: 'btn btn-primary disabled'
}); });
$('#example6').multiselect(); $('#example6').multiselect();
$('.example7').multiselect({ $('.example7').multiselect({
buttonContainer: '<span class="dropdown" />', buttonContainer: '<span class="dropdown" />',
}); });
}); });
</script> </script>
<p> <p>
<select id="example1"> <select id="example1">
<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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</p> </p>
<p> <p>
<select id="example2" multiple="multiple"> <select id="example2" multiple="multiple">
<option value="cheese" selected>Cheese</option> <option value="cheese" selected>Cheese</option>
<option value="tomatoes" selected>Tomatoes</option> <option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option> <option value="mozarella" selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</p> </p>
<p> <p>
<select id="example3" multiple="multiple"> <select id="example3" 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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</p> </p>
<p> <p>
<select id="example4" multiple="multiple"> <select id="example4" 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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</p> </p>
<p> <p>
<select id="example5" multiple="multiple"> <select id="example5" 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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
</p> </p>
<p> <p>
<div class="input-prepend input-append btn-toolbar"> <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" multiple="multiple"> <select id="example6" 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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<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> <button class="btn btn-danger">Cancel</button>
<button class="btn btn-success">Save</button> <button class="btn btn-success">Save</button>
</div> </div>
</p> </p>
<p> <p>
<div class="input-prepend input-append"> <div class="input-prepend input-append">
<span class="add-on"><b class="icon-list-alt"></b></span> <span class="add-on"><b class="icon-list-alt"></b></span>
<select class="example7" multiple="multiple"> <select class="example7" 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>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option> <option value="onions">Onions</option>
</select> </select>
<select class="example7" multiple="multiple"> <select class="example7" multiple="multiple">
<option value="small">Small</option> <option value="small">Small</option>
<option value="medium">Medium</option> <option value="medium">Medium</option>
<option value="large">Large</option> <option value="large">Large</option>
<option value="extra">Extra Large</option> <option value="extra">Extra Large</option>
</select> </select>
<button class="btn btn-primary">Save</button> <button class="btn btn-primary">Save</button>
</div> </div>
</p> </p>
## Configuration Options ## Configuration Options
**buttonClass** **buttonClass**
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information. Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
buttonClass: 'btn btn-small' buttonClass: 'btn btn-small'
}); });
}); });
**buttonWidth** **buttonWidth**
The width of the dropdown button. The width of the dropdown button.
$(document).ready(function() { $(document).ready(function() {
$('.multiselect').multiselect({ $('.multiselect').multiselect({
buttonWidth: 'auto', // Default buttonWidth: 'auto', // Default
}); });
}); });
The width can be defined using all formats accepted by CSS: The width can be defined using all formats accepted by CSS:
100px 100px
50% 50%
auto auto
**buttonText** If the width is defined using CSS the option should be set to false.
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter. **buttonText**
$(document).ready(function() { Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
$('.multiselect').multiselect({
buttonText: function(options) { $(document).ready(function() {
if (options.length == 0) { $('.multiselect').multiselect({
return 'None selected <b class="caret"></b>'; buttonText: function(options) {
} if (options.length == 0) {
else if (options.length > 3) { return 'None selected <b class="caret"></b>';
return options.length + ' selected <b class="caret"></b>'; }
} else if (options.length > 3) {
else { return options.length + ' selected <b class="caret"></b>';
var selected = ''; }
options.each(function() { else {
selected += $(this).text() + ', '; var selected = '';
}); options.each(function() {
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>'; selected += $(this).text() + ', ';
} });
}, return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}); }
}); },
});
**buttonContainer** });
The used container holding both the dropdown button and the dropdown menu. **buttonContainer**
$(document).ready(function() { The used container holding both the dropdown button and the dropdown menu.
$('.multiselect').multiselect({
buttonContainer: '<span class="dropdown" />', $(document).ready(function() {
}); $('.multiselect').multiselect({
}); buttonContainer: '<span class="dropdown" />',
});
**onChange** });
Assign an event handler to the change event: **onChange**
$(document).ready(function() { Assign an event handler to the change event:
$('.multiselect').multiselect({
onChange:function(element, checked){ $(document).ready(function() {
alert('Change event invoked!'); $('.multiselect').multiselect({
console.log(element); onChange:function(element, checked){
} alert('Change event invoked!');
}); console.log(element);
}); }
});
**maxHeight** });
Define the maximum height property of the dropdown list. If the maximum height of the option list is exceeded a scrollbar will be displayed. **maxHeight**
$(document).ready(function() { Define the maximum height property of the dropdown list. If the maximum height of the option list is exceeded a scrollbar will be displayed.
$('.multiselect').multiselect({
// Or false for no maximum height. $(document).ready(function() {
maxHeight: 400, $('.multiselect').multiselect({
}); // Or false for no maximum height.
}); maxHeight: 400,
});
## Methods });
**.multiselect('destroy')** ## Methods
This method will destroy - unbind - the plugin on the given element(s). **.multiselect('destroy')**
**.multiselect('refresh')** This method will destroy - unbind - the plugin on the given element(s).
Refresh the selected elements depending on the selected options within the select. **.multiselect('refresh')**
**.multiselect('rebuild')** Refresh the selected elements depending on the selected options within the select.
Rebuilds the whole dropdown menu. Selected options will still be selected. **.multiselect('rebuild')**
## Knockout JS Support Rebuilds the whole dropdown menu. Selected options will still be selected.
Thanks to [Devristo](https://github.com/Devristo) this plugin supports [Knockout JS](http://knockoutjs.com/). For further discussion see [the pull requests](https://github.com/davidstutz/bootstrap-multiselect/pull/17). ## Additional Styling
**Define select input** Additional Styling can be done using the multiselect class:
Note the multiselect: true binding! .multiselect {
text-align: left;
<select class="multiSelect" data-bind="multiselect: true, options: Options, selectedOptions: SelectedOptions, optionsValue: $data" multiple="multiple"></select> }
.multiselect b.caret {
**Initialize Bootstrap-multiselect** float: right;
}
$(".multiSelect").multiselect();
## Knockout JS Support
**Apply Knockout view model**
Thanks to [Devristo](https://github.com/Devristo) this plugin supports [Knockout JS](http://knockoutjs.com/). For further discussion see [the pull requests](https://github.com/davidstutz/bootstrap-multiselect/pull/17).
As usual.
**Define select input**
**Notes**
Note the multiselect: true binding!
It is important to initialize the multiselect before applying the view model, since the custom binding code will hook into the onChange method to update the binding.
<select class="multiSelect" data-bind="multiselect: true, options: Options, selectedOptions: SelectedOptions, optionsValue: $data" multiple="multiple"></select>
## Roadmap / Todo
**Initialize Bootstrap-multiselect**
* This solution for multiple selects is not usable for mobile devices (especially with touchscreen). ALternatives: Using Popovers instead of Dropdowns or checking for mobile devices and displaying normal select field (one row) for mobile devices.
$(".multiSelect").multiselect();
## License
**Apply Knockout view model**
Copyright 2012 David Stutz
As usual.
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
**Notes**
[http://www.apache.org/licenses/LICENSE-2.0](http://www.apache.org/licenses/LICENSE-2.0)
It is important to initialize the multiselect before applying the view model, since the custom binding code will hook into the onChange method to update the binding.
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.
## Roadmap / Todo
* This solution for multiple selects is not usable for mobile devices (especially with touchscreen). ALternatives: Using Popovers instead of Dropdowns or checking for mobile devices and displaying normal select field (one row) for mobile devices.
## License
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](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.
index.html
View file @ efdc63a9
...@@ -16,49 +16,6 @@ ...@@ -16,49 +16,6 @@
<script type="text/javascript" src="js/prettify.js"></script> <script type="text/javascript" src="js/prettify.js"></script>
</head> </head>
<body> <body>
<script type="text/javascript">
$(document).ready(function() {
window.prettyPrint() && prettyPrint();
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
buttonClass: 'btn btn-link'
});
$('#example4').multiselect({
buttonClass: 'btn btn-small'
});
$('#example5').multiselect({
buttonClass: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
buttonContainer: '<span class="dropdown" />',
});
$('#example9').multiselect({
onChange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
for (var i = 1; i <= 100; i++) {
$('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
}
$('#example11').multiselect({
maxHeight: 200,
})
$('#example13').multiselect();
});
</script>
<div class="container"> <div class="container">
<div class="hero-unit"> <div class="hero-unit">
<h1>Bootstrap Multiselect</h1> <h1>Bootstrap Multiselect</h1>
...@@ -72,6 +29,65 @@ ...@@ -72,6 +29,65 @@
<div class="page-header"> <div class="page-header">
<h1>Examples</h1> <h1>Examples</h1>
</div> </div>
<script type="text/javascript">
$(document).ready(function() {
window.prettyPrint() && prettyPrint();
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
buttonClass: 'btn btn-link'
});
$('#example4').multiselect({
buttonClass: 'btn btn-small'
});
$('#example5').multiselect({
buttonClass: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
buttonContainer: '<span class="dropdown" />',
});
$('#example9').multiselect({
onChange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
for (var i = 1; i <= 100; i++) {
$('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
}
$('#example11').multiselect({
maxHeight: 200
})
$('#example13').multiselect();
$('#example14').multiselect({
buttonWidth: '500px',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
}
});
});
</script>
<p> <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. 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> </p>
...@@ -79,8 +95,8 @@ ...@@ -79,8 +95,8 @@
<tr> <tr>
<td> <td>
<select id="example1"> <select id="example1">
<option value="cheese">Cheese</option> <option value="cheese" selected>Cheese</option>
<option value="tomatoes">Tomatoes</option> <option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella">Mozzarella</option> <option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option> <option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option> <option value="pepperoni">Pepperoni</option>
...@@ -88,7 +104,7 @@ ...@@ -88,7 +104,7 @@
</select> </select>
</td> </td>
<td> <td>
Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically. The first option is selected automatically by the browser when ommitting the <code>multiple="multiple"</code> attribute. Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically. The first option is selected automatically by the browser when ommitting the <code>multiple</code> attribute. But note: If the <code>mutliple</code> attribute is omitted and more than one option is selected by default, the browser will select the last selected option before the plugin has the chance to add the <code>mutliple</code> attribute.
</td> </td>
</tr> </tr>
<tr> <tr>
...@@ -231,21 +247,97 @@ ...@@ -231,21 +247,97 @@
The plugin supports disabled options, too: <code>disabled=&quot;disabled&quot;</code> The plugin supports disabled options, too: <code>disabled=&quot;disabled&quot;</code>
</td> </td>
</tr> </tr>
<tr>
<td>
<select id="example14" 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>
Use the <code>buttonWidth</code> option to adjust the width of the button.
</td>
</tr>
</table> </table>
<div class="page-header">
<h1>Code</h1>
</div>
<p>
Basic markup used in the above examples:
</p>
<pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-responsive.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({
buttonClass: &apos;btn&apos;,
buttonWidth: &apos;auto&apos;,
buttonText: function(options) {
if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
}
});
});
&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"> <div class="page-header">
<h1>Methods</h1> <h1>Methods</h1>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$('#example8').multiselect({ $('#example8').multiselect({
buttonContainer: '<span />', buttonContainer: '<span />'
}); });
$('#example8-destroy').on('click', function() { $('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy'); $('#example8').multiselect('destroy');
}); });
$('#example10').multiselect({ $('#example10').multiselect({
buttonContainer: '<span />', buttonContainer: '<span />'
}); });
$('#example10-select').on('click', function() { $('#example10-select').on('click', function() {
$('option[value="tomatoes"]', $('#example10')).prop('selected', 'selected'); $('option[value="tomatoes"]', $('#example10')).prop('selected', 'selected');
...@@ -263,7 +355,7 @@ ...@@ -263,7 +355,7 @@
}); });
$('#example12').multiselect({ $('#example12').multiselect({
buttonContainer: '<span />', buttonContainer: '<span />'
}); });
$('#example12-rebuild').on('click', function() { $('#example12-rebuild').on('click', function() {
$('#example12').multiselect('rebuild'); $('#example12').multiselect('rebuild');
...@@ -343,67 +435,6 @@ ...@@ -343,67 +435,6 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="page-header">
<h1>Code</h1>
</div>
<p>
Basic markup used in the above examples:
</p>
<pre class="prettyprint linenums">
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap.min.css&quot; type=&quot;text/css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/bootstrap-responsive.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({
buttonClass: &apos;btn&apos;,
buttonWidth: &apos;auto&apos;,
buttonText: function(options) {
if (options.length == 0) {
return &apos;None selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else if (options.length > 3) {
return options.length + &apos; selected &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
else {
var selected = &apos;&apos;;
options.each(function() {
selected += $(this).text() + &apos;, &apos;;
});
return selected.substr(0, selected.length -2) + &apos; &lt;b class="caret"&gt;&lt;/b&gt;&apos;;
}
}
});
});
&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"> <div class="page-header">
<h1>Options</h1> <h1>Options</h1>
</div> </div>
...@@ -470,6 +501,7 @@ ...@@ -470,6 +501,7 @@
<li><code>50%</code></li> <li><code>50%</code></li>
<li><code>auto</code></li> <li><code>auto</code></li>
</ul> </ul>
If the width is defined using CSS the option should be set to <code>false</code>.
</td> </td>
<td> <td>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
...@@ -538,6 +570,69 @@ ...@@ -538,6 +570,69 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="page-header">
<h1>Additional Styling</h1>
</div>
<p>For additionaly styling of the multiselect button the CSS class <code>multiselect</code> can be used.</p>
<style type="text/css">
.add-styling .multiselect {
width: 500px;
text-align: left;
}
.add-styling .multiselect b.caret {
position: absolute;
right: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#example15').multiselect({
buttonWidth: '500px',
buttonText: function(options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
}
});
});
</script>
<div class="add-styling">
<table class="table table-striped">
<tr>
<td>
<select id="example15" 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>
Text alignment combined with fixed width.
</td>
<td>
<pre class="prettyprint linenums">
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
</pre>
</td>
</tr>
</table>
</div>
</p>
<hr> <hr>
<div> <div>
&copy; 2012 &copy; 2012
......
js/bootstrap-multiselect.js
View file @ efdc63a9
...@@ -50,13 +50,29 @@ ...@@ -50,13 +50,29 @@
} }
function Multiselect(select, options) { function Multiselect(select, options) {
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.select = $(select); this.select = $(select);
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
if (this.isMobile()) {
this.select.attr('rows', 1);
}
this.container = $(this.options.buttonContainer) this.container = $(this.options.buttonContainer)
.append('<button type="button" class="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)) + '</button>')
.append('<ul class="dropdown-menu"></ul>'); .append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) {
$('button', this.container).css({
'width': this.options.buttonWidth
});
}
// Set max height of dropdown menu to activate auto scrollbar. // Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) { if (this.options.maxHeight) {
$('ul', this.container).css({ $('ul', this.container).css({
...@@ -66,11 +82,6 @@ ...@@ -66,11 +82,6 @@
}); });
} }
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
this.buildDrowdown(select, this.options); this.buildDrowdown(select, this.options);
this.select this.select
...@@ -110,6 +121,10 @@ ...@@ -110,6 +121,10 @@
// If maximum height is exceeded a scrollbar will be displayed. // If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400 maxHeight: 400
}, },
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
constructor: Multiselect, constructor: Multiselect,
......
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