Commit efdc63a9 authored by David Stutz's avatar David Stutz

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
...@@ -152,6 +152,8 @@ The width can be defined using all formats accepted by CSS: ...@@ -152,6 +152,8 @@ The width can be defined using all formats accepted by CSS:
50% 50%
auto auto
If the width is defined using CSS the option should be set to false.
**buttonText** **buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter. Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
...@@ -224,6 +226,17 @@ Refresh the selected elements depending on the selected options within the selec ...@@ -224,6 +226,17 @@ Refresh the selected elements depending on the selected options within the selec
Rebuilds the whole dropdown menu. Selected options will still be selected. Rebuilds the whole dropdown menu. Selected options will still be selected.
## Additional Styling
Additional Styling can be done using the multiselect class:
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
## Knockout JS Support ## Knockout JS Support
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). 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).
......
...@@ -16,6 +16,19 @@ ...@@ -16,6 +16,19 @@
<script type="text/javascript" src="js/prettify.js"></script> <script type="text/javascript" src="js/prettify.js"></script>
</head> </head>
<body> <body>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
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>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
<div class="page-header">
<h1>Examples</h1>
</div>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
window.prettyPrint() && prettyPrint(); window.prettyPrint() && prettyPrint();
...@@ -53,25 +66,28 @@ ...@@ -53,25 +66,28 @@
$('#example11').append('<option value="' + i + '">Options ' + i + '</option>'); $('#example11').append('<option value="' + i + '">Options ' + i + '</option>');
} }
$('#example11').multiselect({ $('#example11').multiselect({
maxHeight: 200, maxHeight: 200
}) })
$('#example13').multiselect(); $('#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> </script>
<div class="container">
<div class="hero-unit">
<h1>Bootstrap Multiselect</h1>
<p>
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>
<p class="alert alert-info">
<b>Note:</b> The option names may have changed due to the latest updates.
</p>
<div class="page-header">
<h1>Examples</h1>
</div>
<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
......
...@@ -53,10 +53,26 @@ ...@@ -53,10 +53,26 @@
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
...@@ -111,6 +122,10 @@ ...@@ -111,6 +122,10 @@
maxHeight: 400 maxHeight: 400
}, },
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
constructor: Multiselect, constructor: Multiselect,
buildDrowdown: function(select, options){ buildDrowdown: function(select, options){
......
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