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 @@
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</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="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li>
......@@ -992,6 +993,71 @@
</tbody>
</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">
<h1><a id="methods"></a>Methods</h1>
</div>
......
index.html
View file @ f7cbd26c
......@@ -26,6 +26,7 @@
<li><a href="#getting-started">Getting Started</a></li>
<li><a href="#examples">Examples</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="#further-examples">Further Examples</a></li>
<li><a href="#additional-styling">Additional Styling</a></li>
......@@ -1052,6 +1053,71 @@
</tbody>
</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">
<h1><a id="methods"></a>Methods</h1>
</div>
......
js/bootstrap-multiselect.js
View file @ f7cbd26c
......@@ -212,16 +212,15 @@
preventInputChangeEvent: false,
nonSelectedText: 'None selected',
nSelectedText: 'selected',
numberDisplayed: 3
},
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
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>',
li: '<li><a href="javascript:void(0);"><label></label></a></li>',
divider: '<li class="divider"></li>',
liGroup: '<li><label class="multiselect-group"></label></li>'
numberDisplayed: 3,
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
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>',
li: '<li><a href="javascript:void(0);"><label></label></a></li>',
divider: '<li class="divider"></li>',
liGroup: '<li><label class="multiselect-group"></label></li>'
}
},
constructor: Multiselect,
......@@ -239,7 +238,7 @@
* Builds the button of the multiselect.
*/
buildButton: function() {
this.$button = $(this.templates.button).addClass(this.options.buttonClass);
this.$button = $(this.options.templates.button).addClass(this.options.buttonClass);
// Adopt active state.
if (this.$select.prop('disabled')) {
......@@ -271,7 +270,7 @@
buildDropdown: function() {
// Build ul.
this.$ul = $(this.templates.ul);
this.$ul = $(this.options.templates.ul);
if (this.options.dropRight) {
this.$ul.addClass('pull-right');
......@@ -503,7 +502,7 @@
var value = $(element).val();
var inputType = this.options.multiple ? "checkbox" : "radio";
var $li = $(this.templates.li);
var $li = $(this.options.templates.li);
$('label', $li).addClass(inputType);
$('label', $li).append('<input type="' + inputType + '" name="' + this.options.checkboxName + '" />');
......@@ -541,7 +540,7 @@
* @param {jQuery} element
*/
createDivider: function(element) {
var $divider = $(this.templates.divider);
var $divider = $(this.options.templates.divider);
this.$ul.append($divider);
},
......@@ -554,7 +553,7 @@
var groupName = $(group).prop('label');
// Add a header for the group.
var $li = $(this.templates.liGroup);
var $li = $(this.options.templates.liGroup);
$('label', $li).text(groupName);
this.$ul.append($li);
......@@ -599,7 +598,7 @@
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);
this.$ul.prepend(this.$filter);
......@@ -858,7 +857,7 @@
* @returns {Array}
*/
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