Skip to content

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

Added destroy method. 

Added the possibility to destroy/unbind the plugin. Adjusted link and
label style for the dropdown. Minor changes.
parent 44d03ef1
Hide whitespace changes
Inline Side-by-side
Showing with 169 additions and 78 deletions
.project 0 → 100644
View file @ 4c437fe2
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>multiselect</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
<nature>com.aptana.projects.webnature</nature>
</natures>
</projectDescription>
README.md
View file @ 4c437fe2
......@@ -32,7 +32,7 @@ These examples can also be seen in action in index.html:
});
</script>
<p>
<select id="example1" class="multiselect">
<select id="example1">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -42,7 +42,17 @@ These examples can also be seen in action in index.html:
</select>
</p>
<p>
<select id="example3" class="multiselect" multiple="multiple">
<select id="example2" multiple="multiple">
<option value="cheese" selected>Cheese</option>
<option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</p>
<p>
<select id="example3" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -52,7 +62,7 @@ These examples can also be seen in action in index.html:
</select>
</p>
<p>
<select id="example4" class="multiselect" multiple="multiple">
<select id="example4" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -62,7 +72,7 @@ These examples can also be seen in action in index.html:
</select>
</p>
<p>
<select id="example5" class="multiselect" multiple="multiple">
<select id="example5" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -74,7 +84,7 @@ These examples can also be seen in action in index.html:
<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">
<select id="example6" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -166,7 +176,13 @@ The used container holding both the dropdown button and the dropdown menu.
$('.multiselect').multiselect({
container: '<span class="dropdown" />',
});
## Methods
**.multiselect('destroy')**
This method will destroy - unbind - the plugin on the given element(s).
## 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.
......
index.html
View file @ 4c437fe2
......@@ -49,7 +49,7 @@
<table class="table table-striped">
<tr>
<td>
<select id="example1" class="multiselect">
<select id="example1">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -59,12 +59,27 @@
</select>
</td>
<td>
Normal select. The plugin will add the <code>multiple="multiple"</code> attribute automatically.
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.
</td>
</tr>
<tr>
<td>
<select id="example3" class="multiselect" multiple="multiple">
<select id="example2" multiple="multiple">
<option value="cheese" selected>Cheese</option>
<option value="tomatoes" selected>Tomatoes</option>
<option value="mozarella" selected>Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
</td>
<td>
Select with preselected options: <code>&lt;option value=&quot;cheese&quot; selected&gt;Cheese&lt;/option&gt;</code>
</td>
</tr>
<tr>
<td>
<select id="example3" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -79,7 +94,7 @@
</tr>
<tr>
<td>
<select id="example4" class="multiselect" multiple="multiple">
<select id="example4" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -94,7 +109,7 @@
</tr>
<tr>
<td>
<select id="example5" class="multiselect" multiple="multiple">
<select id="example5" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -111,7 +126,7 @@
<td>
<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">
<select id="example6" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
......@@ -140,9 +155,7 @@
<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="large">Extra Cheese</option>
<option value="extra">Extra Large</option>
</select>
<button class="btn btn-primary">Save</button>
......@@ -153,6 +166,42 @@
</td>
</tr>
</table>
<div class="page-header">
<h1>Methods</h1>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#example8').multiselect({
container: '<span />',
});
$('#example8-destroy').on('click', function() {
$('#example8').multiselect('destroy');
});
});
</script>
<table class="table table-striped">
<tbody>
<tr>
<td><code>.multiselect('destroy')</code></td>
<td>
<div class="btn-group">
<select id="example8" 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 id="example8-destroy" class="btn btn-danger">Destroy/Unbind</button>
</div>
</td>
<td>
This method is used to destroy the plugin on the given element - meaning unbinding the plugin.
</td>
</tr>
</tbody>
</table>
<div class="page-header">
<h1>Code</h1>
</div>
......
js/bootstrap-multiselect.js
View file @ 4c437fe2
......@@ -20,103 +20,117 @@
"use strict"; // jshint ;_;
var Multiselect = function(element, options) {
// Default options:
var defaults = {
button: 'btn',
width: 'auto',
// Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed.
text: function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
container: '<div class="btn-group" />',
};
options = $.extend(defaults, options);
function Multiselect(select, options) {
var select = element,
// Create the button with given classes and the inital text.
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(),
// The ul will hold all options and present the dropdown.
ul = $('<ul class="dropdown-menu"></ul>'),
container = $(options.container)
.append(button)
.append(ul);
this.options = this.getOptions(options);
this.select = $(select);
this.container = $(this.options.container)
.append('<button style="width:' + this.options.width + '" class="dropdown-toggle ' + this.options.button + '" data-toggle="dropdown">' + this.options.text($('option:selected', select)) + ' <b class="caret"></b></button>')
.append('<ul class="dropdown-menu"></ul>');
// Manually add the multiple attribute, if its not already set.
if (!$(select).attr('multiple')) {
$(select).attr('multiple', true);
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
// Build the dropdown.
$('option', select).each(function() {
if ($(this).is(':selected')) {
$(this).attr('selected', true);
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$(element).attr('selected', true);
}
$(ul).append('<li><a href="#"><label class="checkbox"><input type="checkbox" value="' + $(this).val() + '"> ' + $(this).text() + '</label></a></li>');
$('ul', this.container).append('<li><a href="#" style="padding:0;"><label style="margin:0;padding: 3px 20px 3px 20px;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(this).attr('selected') || false,
checkbox = $('li input[value="' + $(this).val() + '"]', ul);
var selected = $(element).attr('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.attr('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
});
$(select).hide()
.after(container);
}, this));
$('li label', ul).css({'cursor': 'pointer'});
this.select.hide()
.after(this.container);
// Bind the change event on the dropdown elements.
$('li input[type="checkbox"]', ul).on('change', function(event) {
var checked = $(this).attr('checked') || false;
$('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
var checked = $(event.target).attr('checked') || false;
if (checked) {
$(this).parents('li').addClass('active');
$(event.target).parents('li').addClass('active');
}
else {
$(this).parents('li').removeClass('active');
$(event.target).parents('li').removeClass('active');
}
$('option[value="' + $(this).val() + '"]', select).attr('selected', checked);
$('option[value="' + $(event.target).val() + '"]', this.select).attr('selected', checked);
$(button).html(options.text($('option:selected', select)) + ' <b class="caret"></b>');
});
$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>');
}, this));
$('li a', ul).on('click', function(event) {
event.stopImmediatePropagation();
$('ul li a').on('click', function(event) {
event.stopPropagation();
});
};
$.fn.multiselect = function (options) {
Multiselect.prototype = {
defaults: {
button: 'btn',
width: 'auto',
// Default text function will either print 'None selected' in case no option is selected,
// or a list of the selected options up to a length of 3 selected options.
// If more than 3 options are selected, the number of selected options is printed.
text: function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
}
},
container: '<div class="btn-group" />',
},
constructor: Multiselect,
reset: function() {
},
// Destroy - unbind - the plugin.
destroy: function() {
this.container.remove();
this.select.show();
},
// Get options by merging defaults and given options.
getOptions: function(options) {
return $.extend({}, this.defaults, options);
}
};
$.fn.multiselect = function (option) {
return this.each(function () {
var data = $(this).data('multiselect');
var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options)));
}
if (typeof option == 'string') {
data[option]();
}
});
}
Multiselect.prototype.constructor = Multiselect;
}(window.jQuery);
\ No newline at end of file
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