Skip to content

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

#277: templates can be overriden using configuration options.

parent 7c2605bd
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 17 deletions
index-2-3.html
View file @ f7cbd26c
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<li><a href="#getting-started">Getting Started</a></li> <li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</a></li> <li><a href="#examples">Examples</a></li>
<li><a href="#options">Options</a></li> <li><a href="#options">Options</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#methods">Methods</a></li> <li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li> <li><a href="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li> <li><a href="#additional-styling">Additional Styling</a></li>
...@@ -992,6 +993,71 @@ ...@@ -992,6 +993,71 @@
</tbody> </tbody>
</table> </table>
<div class="page-header">
<h1><a id="templates"></a>Templates</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example47').multiselect({
templates: {
divider: '<div class="divider" data-role="divider"></div>'
}
});
});
</script>
<p>
The plugin uses templates to create different parts of the plugin - as for example the filter, dividers or the button. The default templates can be seen below.
</p>
<pre class="prettyprint linenums">
templates: {
button: '&lt;button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"&gt;&lt;/button&gt;',
ul: '&lt;ul class="multiselect-container dropdown-menu"&gt;&lt;/ul&gt;',
filter: '&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input class="form-control multiselect-search" type="text"&gt;&lt;/div&gt;',
li: '&lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;label&gt;&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;',
divider: '&lt;li class="divider"&gt;&lt;/li&gt;',
liGroup: '&lt;li&gt;&lt;label class="multiselect-group"&gt;&lt;/label&gt;&lt;/li&gt;'
}
</pre>
<p>
The templates can be overriden using the <code>templates</code> configuration option. The example below uses a <code>div</code> for dividers.
</p>
<table class="table table-striped">
<tbody>
<tr>
<td>
<select id="example47" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option data-role="divider"></option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option data-role="divider"></option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
templates: {
divider: '&lt;div class="divider" data-role="divider"&gt;&lt;/div&gt;'
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header"> <div class="page-header">
<h1><a id="methods"></a>Methods</h1> <h1><a id="methods"></a>Methods</h1>
</div> </div>
......
index.html
View file @ f7cbd26c
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
<li><a href="#getting-started">Getting Started</a></li> <li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</a></li> <li><a href="#examples">Examples</a></li>
<li><a href="#options">Options</a></li> <li><a href="#options">Options</a></li>
<li><a href="#templates">Templates</a></li>
<li><a href="#methods">Methods</a></li> <li><a href="#methods">Methods</a></li>
<li><a href="#further-examples">Further Examples</a></li> <li><a href="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li> <li><a href="#additional-styling">Additional Styling</a></li>
...@@ -1052,6 +1053,71 @@ ...@@ -1052,6 +1053,71 @@
</tbody> </tbody>
</table> </table>
<div class="page-header">
<h1><a id="templates"></a>Templates</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example47').multiselect({
templates: {
divider: '<div class="divider" data-role="divider"></div>'
}
});
});
</script>
<p>
The plugin uses templates to create different parts of the plugin - as for example the filter, dividers or the button. The default templates can be seen below.
</p>
<pre class="prettyprint linenums">
templates: {
button: '&lt;button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"&gt;&lt;/button&gt;',
ul: '&lt;ul class="multiselect-container dropdown-menu"&gt;&lt;/ul&gt;',
filter: '&lt;div class="input-group"&gt;&lt;span class="input-group-addon"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/span&gt;&lt;input class="form-control multiselect-search" type="text"&gt;&lt;/div&gt;',
li: '&lt;li&gt;&lt;a href="javascript:void(0);"&gt;&lt;label&gt;&lt;/label&gt;&lt;/a&gt;&lt;/li&gt;',
divider: '&lt;li class="divider"&gt;&lt;/li&gt;',
liGroup: '&lt;li&gt;&lt;label class="multiselect-group"&gt;&lt;/label&gt;&lt;/li&gt;'
}
</pre>
<p>
The templates can be overriden using the <code>templates</code> configuration option. The example below uses a <code>div</code> for dividers.
</p>
<table class="table table-striped">
<tbody>
<tr>
<td>
<select id="example47" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option data-role="divider"></option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option data-role="divider"></option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
templates: {
divider: '&lt;div class="divider" data-role="divider"&gt;&lt;/div&gt;'
}
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
</tbody>
</table>
<div class="page-header"> <div class="page-header">
<h1><a id="methods"></a>Methods</h1> <h1><a id="methods"></a>Methods</h1>
</div> </div>
......
js/bootstrap-multiselect.js
View file @ f7cbd26c
...@@ -212,16 +212,15 @@ ...@@ -212,16 +212,15 @@
preventInputChangeEvent: false, preventInputChangeEvent: false,
nonSelectedText: 'None selected', nonSelectedText: 'None selected',
nSelectedText: 'selected', nSelectedText: 'selected',
numberDisplayed: 3 numberDisplayed: 3,
}, templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
templates: { ul: '<ul class="multiselect-container dropdown-menu"></ul>',
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>', filter: '<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>', li: '<li><a href="javascript:void(0);"><label></label></a></li>',
filter: '<div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text"></div>', divider: '<li class="divider"></li>',
li: '<li><a href="javascript:void(0);"><label></label></a></li>', liGroup: '<li><label class="multiselect-group"></label></li>'
divider: '<li class="divider"></li>', }
liGroup: '<li><label class="multiselect-group"></label></li>'
}, },
constructor: Multiselect, constructor: Multiselect,
...@@ -239,7 +238,7 @@ ...@@ -239,7 +238,7 @@
* Builds the button of the multiselect. * Builds the button of the multiselect.
*/ */
buildButton: function() { buildButton: function() {
this.$button = $(this.templates.button).addClass(this.options.buttonClass); this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
// Adopt active state. // Adopt active state.
if (this.$select.prop('disabled')) { if (this.$select.prop('disabled')) {
...@@ -271,7 +270,7 @@ ...@@ -271,7 +270,7 @@
buildDropdown: function() { buildDropdown: function() {
// Build ul. // Build ul.
this.$ul = $(this.templates.ul); this.$ul = $(this.options.templates.ul);
if (this.options.dropRight) { if (this.options.dropRight) {
this.$ul.addClass('pull-right'); this.$ul.addClass('pull-right');
...@@ -503,7 +502,7 @@ ...@@ -503,7 +502,7 @@
var value = $(element).val(); var value = $(element).val();
var inputType = this.options.multiple ? "checkbox" : "radio"; var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.templates.li); var $li = $(this.options.templates.li);
$('label', $li).addClass(inputType); $('label', $li).addClass(inputType);
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />'); $('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
...@@ -541,7 +540,7 @@ ...@@ -541,7 +540,7 @@
* @param {jQuery} element * @param {jQuery} element
*/ */
createDivider: function(element) { createDivider: function(element) {
var $divider = $(this.templates.divider); var $divider = $(this.options.templates.divider);
this.$ul.append($divider); this.$ul.append($divider);
}, },
...@@ -554,7 +553,7 @@ ...@@ -554,7 +553,7 @@
var groupName = $(group).prop('label'); var groupName = $(group).prop('label');
// Add a header for the group. // Add a header for the group.
var $li = $(this.templates.liGroup); var $li = $(this.options.templates.liGroup);
$('label', $li).text(groupName); $('label', $li).text(groupName);
this.$ul.append($li); this.$ul.append($li);
...@@ -599,7 +598,7 @@ ...@@ -599,7 +598,7 @@
if (this.$select.find('option').length >= enableFilterLength) { if (this.$select.find('option').length >= enableFilterLength) {
this.$filter = $(this.templates.filter); this.$filter = $(this.options.templates.filter);
$('input', this.$filter).attr('placeholder', this.options.filterPlaceholder); $('input', this.$filter).attr('placeholder', this.options.filterPlaceholder);
this.$ul.prepend(this.$filter); this.$ul.prepend(this.$filter);
...@@ -858,7 +857,7 @@ ...@@ -858,7 +857,7 @@
* @returns {Array} * @returns {Array}
*/ */
mergeOptions: function(options) { mergeOptions: function(options) {
return $.extend({}, this.defaults, this.options, options); return $.extend(true, {}, this.defaults, 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