Skip to content

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

Merge pull request #31 from programcsharp/master 

Added keyboard support.
parents 2f3a71cc 6d2c0a63
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 17 deletions
index.html
View file @ dcdd0bb3
......@@ -94,6 +94,10 @@
});
$('#example19').multiselect();
$('#example20').multiselect({
selectedClass: null
});
});
</script>
<p>
......@@ -311,6 +315,23 @@
Option groups are detected automatically and for each option group an header element is added: <code>&lt;optgroup label=&quot;Mathematics&quot;&gt;...&lt;/optgroup&gt;</code>
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example20" 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>
</div>
</td>
<td>
Using the <code>selectedClass</code> option to turn off the active class for selected options.
</td>
</tr>
</table>
<div class="page-header">
<h1>Code</h1>
......@@ -439,6 +460,10 @@
$('#example18-mushrooms').on('click', function() {
$('#example18').multiselect('deselect', 'mushrooms');
});
$('#example20').multiselect({
selectedClass: null
});
});
</script>
<style type="text/css">
......@@ -594,7 +619,7 @@
</tr>
<tr>
<td><code>buttonClass</code></td>
<td>The width of the dropdown button. Default: <code>btn</code>.</td>
<td>The class of the dropdown button. Default: <code>btn</code>.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
......@@ -644,6 +669,21 @@
buttonContainer: &apos;&lt;span class="dropdown" /&gt;&apos;,
});
});
&lt;/script&gt;
</pre>
</td>
</tr>
<tr>
<td><code>selectedClass</code></td>
<td>The class applied to the parent &lt;li&gt; of selected items. Default: <code>active</code>.</td>
<td>
<pre class="prettyprint linenums">
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function() {
$(&#39;.multiselect&#39;).multiselect({
selectedClass: null,
});
});
&lt;/script&gt;
</pre>
</td>
......
js/bootstrap-multiselect.js
View file @ dcdd0bb3
......@@ -78,7 +78,7 @@
});
}
this.buildDrowdown();
this.buildDropdown();
this.$select
.hide()
......@@ -111,6 +111,7 @@
},
buttonClass: 'btn',
selectedClass: 'active',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of the dropdown menu.
......@@ -127,7 +128,7 @@
$(element).prop('selected', 'selected');
}
$('ul', this.$container).append('<li><a href="javascript:void(0);" 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>');
$('ul', this.$container).append('<li><a href="javascript:void(0);" style="padding:0;"><label style="margin:0;padding:3px 20px 3px 20px;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label></a></li>');
var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container);
......@@ -138,19 +139,19 @@
checkbox.prop('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
if (selected && this.options.selectedClass) {
checkbox.parents('li').addClass(this.options.selectedClass);
}
},
// Build the dropdown and bind event handling.
buildDrowdown: function() {
buildDropdown: function() {
if ($('optgroup', this.$select).length > 0) {
$('optgroup', this.$select).each($.proxy(function(index, group) {
var groupName = $(group).prop('label');
// Add a header for the group.
$('ul', this.$container).append('<li><label style="margin:0;padding:3px 20px 3px 20px;width:100%;height:100%;" class="multiselect-group"> ' + groupName + '</label></li>');
$('ul', this.$container).append('<li><label style="margin:0;padding:3px 20px 3px 20px;height:100%;" class="multiselect-group"> ' + groupName + '</label></li>');
// Add the options of the group.
$('option', group).each($.proxy(function(index, element) {
......@@ -168,11 +169,13 @@
$('ul li input[type="checkbox"]', this.$container).on('change', $.proxy(function(event) {
var checked = $(event.target).prop('checked') || false;
if (checked) {
$(event.target).parents('li').addClass('active');
}
else {
$(event.target).parents('li').removeClass('active');
if (this.options.selectedClass) {
if (checked) {
$(event.target).parents('li').addClass(this.options.selectedClass);
}
else {
$(event.target).parents('li').removeClass(this.options.selectedClass);
}
}
var option = $('option[value="' + $(event.target).val() + '"]', this.$select);
......@@ -194,6 +197,53 @@
$('ul li a', this.$container).on('click', function(event) {
event.stopPropagation();
});
this.$container.on('keydown', $.proxy(function(event) {
if ((event.keyCode == 9 || event.keyCode == 27) && this.$container.hasClass('open')) {
// close on tab or escape
$(this.$container).find(".multiselect.dropdown-toggle").click();
}
else {
var $items = $(this.$container).find("li:not(.divider):visible a");
if (!$items.length) {
return;
}
var index = $items.index($items.filter(':focus'));
if (event.keyCode == 38 && index > 0) { // up
index--;
}
else if (event.keyCode == 40 && index < $items.length - 1) { // down
index++;
}
else if (!~index) {
index = 0;
}
var $current = $items.eq(index);
$current.focus();
// override style for items in li:active
if (this.options.selectedClass == "active") {
$current.css("outline", "thin dotted #333").css("outline", "5px auto -webkit-focus-ring-color");
$items.not($current).css("outline", "");
}
if (event.keyCode == 32 || event.keyCode == 13) {
var $checkbox = $current.find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"));
$checkbox.change();
}
event.stopPropagation();
event.preventDefault();
}
}, this));
},
// Destroy - unbind - the plugin.
......@@ -207,11 +257,17 @@
$('option', this.$select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$('ul li input[value="' + $(element).val() + '"]', this.$container).prop('checked', true);
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').addClass('active');
if (this.options.selectedClass) {
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').addClass(this.options.selectedClass);
}
}
else {
$('ul li input[value="' + $(element).val() + '"]', this.$container).prop('checked', false);
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').removeClass('active');
if (this.options.selectedClass) {
$('ul li input[value="' + $(element).val() + '"]', this.$container).parents('li').removeClass(this.options.selectedClass);
}
}
}, this));
......@@ -223,7 +279,10 @@
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').addClass('active');
if (this.options.selectedClass) {
checkbox.parents('li').addClass(this.options.selectedClass);
}
checkbox.prop('checked', true);
option.attr('selected', 'selected');
......@@ -238,7 +297,10 @@
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').removeClass('active');
if (this.options.selectedClass) {
checkbox.parents('li').removeClass(this.options.selectedClass);
}
checkbox.prop('checked', false);
option.removeAttr('selected');
......@@ -251,7 +313,7 @@
// Rebuild the whole dropdown menu.
rebuild: function() {
$('ul', this.$container).html('');
this.buildDrowdown(this.$select, this.options);
this.buildDropdown(this.$select, this.options);
},
// Get options by merging defaults and given 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