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: ...@@ -32,7 +32,7 @@ These examples can also be seen in action in index.html:
}); });
</script> </script>
<p> <p>
<select id="example1" class="multiselect"> <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>
...@@ -42,7 +42,17 @@ These examples can also be seen in action in index.html: ...@@ -42,7 +42,17 @@ These examples can also be seen in action in index.html:
</select> </select>
</p> </p>
<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="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option> <option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option> <option value="mozarella">Mozzarella</option>
...@@ -52,7 +62,7 @@ These examples can also be seen in action in index.html: ...@@ -52,7 +62,7 @@ These examples can also be seen in action in index.html:
</select> </select>
</p> </p>
<p> <p>
<select id="example4" class="multiselect" 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>
...@@ -62,7 +72,7 @@ These examples can also be seen in action in index.html: ...@@ -62,7 +72,7 @@ These examples can also be seen in action in index.html:
</select> </select>
</p> </p>
<p> <p>
<select id="example5" class="multiselect" 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>
...@@ -74,7 +84,7 @@ These examples can also be seen in action in index.html: ...@@ -74,7 +84,7 @@ These examples can also be seen in action in index.html:
<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" class="multiselect" 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>
...@@ -166,7 +176,13 @@ The used container holding both the dropdown button and the dropdown menu. ...@@ -166,7 +176,13 @@ The used container holding both the dropdown button and the dropdown menu.
$('.multiselect').multiselect({ $('.multiselect').multiselect({
container: '<span class="dropdown" />', container: '<span class="dropdown" />',
}); });
## Methods
**.multiselect('destroy')**
This method will destroy - unbind - the plugin on the given element(s).
## Roadmap / Todo ## 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. * 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 @@ ...@@ -49,7 +49,7 @@
<table class="table table-striped"> <table class="table table-striped">
<tr> <tr>
<td> <td>
<select id="example1" class="multiselect"> <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>
...@@ -59,12 +59,27 @@ ...@@ -59,12 +59,27 @@
</select> </select>
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>
<td> <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="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option> <option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option> <option value="mozarella">Mozzarella</option>
...@@ -79,7 +94,7 @@ ...@@ -79,7 +94,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<select id="example4" class="multiselect" 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>
...@@ -94,7 +109,7 @@ ...@@ -94,7 +109,7 @@
</tr> </tr>
<tr> <tr>
<td> <td>
<select id="example5" class="multiselect" 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>
...@@ -111,7 +126,7 @@ ...@@ -111,7 +126,7 @@
<td> <td>
<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" class="multiselect" 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>
...@@ -140,9 +155,7 @@ ...@@ -140,9 +155,7 @@
<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="large">Extra Cheese</option>
<option value="medium">Medium</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>
...@@ -153,6 +166,42 @@ ...@@ -153,6 +166,42 @@
</td> </td>
</tr> </tr>
</table> </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"> <div class="page-header">
<h1>Code</h1> <h1>Code</h1>
</div> </div>
......
js/bootstrap-multiselect.js
View file @ 4c437fe2
...@@ -20,103 +20,117 @@ ...@@ -20,103 +20,117 @@
"use strict"; // jshint ;_; "use strict"; // jshint ;_;
var Multiselect = function(element, options) { function Multiselect(select, 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);
var select = element, this.options = this.getOptions(options);
// Create the button with given classes and the inital text. this.select = $(select);
button = $('<button style="width:' + options.width + '" class="dropdown-toggle ' + options.button + '" data-toggle="dropdown">' + options.text($('option:selected', select)) + ' <b class="caret"></b></button>') this.container = $(this.options.container)
.dropdown(), .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>')
// The ul will hold all options and present the dropdown. .append('<ul class="dropdown-menu"></ul>');
ul = $('<ul class="dropdown-menu"></ul>'),
container = $(options.container)
.append(button)
.append(ul);
// Manually add the multiple attribute, if its not already set. // Manually add the multiple attribute, if its not already set.
if (!$(select).attr('multiple')) { if (!this.select.attr('multiple')) {
$(select).attr('multiple', true); this.select.attr('multiple', true);
} }
// Build the dropdown. // Build the dropdown.
$('option', select).each(function() { $('option', this.select).each($.proxy(function(index, element) {
if ($(this).is(':selected')) { if ($(element).is(':selected')) {
$(this).attr('selected', true); $(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, var selected = $(element).attr('selected') || false;
checkbox = $('li input[value="' + $(this).val() + '"]', ul); var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.attr('checked', selected); checkbox.attr('checked', selected);
if (selected) { if (selected) {
checkbox.parents('li').addClass('active'); checkbox.parents('li').addClass('active');
} }
}); }, this));
$(select).hide()
.after(container);
$('li label', ul).css({'cursor': 'pointer'}); this.select.hide()
.after(this.container);
// Bind the change event on the dropdown elements. // Bind the change event on the dropdown elements.
$('li input[type="checkbox"]', ul).on('change', function(event) { $('ul li input[type="checkbox"]', this.container).on('change', $.proxy(function(event) {
var checked = $(this).attr('checked') || false; var checked = $(event.target).attr('checked') || false;
if (checked) { if (checked) {
$(this).parents('li').addClass('active'); $(event.target).parents('li').addClass('active');
} }
else { 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) { $('ul li a').on('click', function(event) {
event.stopImmediatePropagation(); 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 () { return this.each(function () {
var data = $(this).data('multiselect'); var data = $(this).data('multiselect'),
options = typeof option == 'object' && option;
if (!data) { if (!data) {
$(this).data('multiselect', (data = new Multiselect(this, options))); $(this).data('multiselect', (data = new Multiselect(this, options)));
} }
if (typeof option == 'string') {
data[option]();
}
}); });
} }
Multiselect.prototype.constructor = Multiselect;
}(window.jQuery); }(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