Skip to content

B
bootstrap-multiselect
Commit 2c60b796 authored by Chris Hynes's avatar Chris Hynes
Browse files
Options

Added keyboard support (fixes issue #30) 

Removed li=active attribute setting because that conflicts with keyboard support
Cleaned up whitespace
parent 659a0853
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 50 deletions
js/bootstrap-multiselect.js
View file @ 2c60b796
......@@ -50,24 +50,23 @@
}
function Multiselect(select, options) {
this.options = this.getOptions(options);
this.options = this.getOptions(options);
this.$select = $(select);
// Manually add the multiple attribute, if its not already set.
if (!this.$select.attr('multiple')) {
this.$select.attr('multiple', true);
}
this.$container = $(this.options.buttonContainer)
.append('<button type="button" class="multiselect dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) {
$('button', this.$container).css({
'width': this.options.buttonWidth
});
}
if (this.options.buttonWidth) {
$('button', this.$container).css({
'width': this.options.buttonWidth
});
}
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
......@@ -78,7 +77,7 @@
});
}
this.buildDrowdown(select, this.options);
this.buildDropdown(select, this.options);
this.$select
.hide()
......@@ -108,7 +107,6 @@
},
// Is triggered on change of the selected options.
onChange: function(option, checked) {
},
buttonClass: 'btn',
buttonWidth: 'auto',
......@@ -117,14 +115,14 @@
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
constructor: Multiselect,
buildDrowdown: function(select, options){
buildDropdown: function(select, options){
// Build the dropdown.
$('option', this.$select).each($.proxy(function(index, element) {
......@@ -133,7 +131,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;" tabindex="-1"><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() + '" tabindex="-1" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.$container);
......@@ -143,23 +141,12 @@
}
checkbox.prop('checked', selected);
if (selected) {
checkbox.parents('li').addClass('active');
}
}, this));
// Bind the change event on the dropdown elements.
$('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');
}
var option = $('option[value="' + $(event.target).val() + '"]', this.$select);
if (checked) {
......@@ -179,6 +166,44 @@
$('ul li a', this.$container).on('click', function(event) {
event.stopPropagation();
});
$(this.$container).on('keydown', function(e) {
if ((e.keyCode == 9 || e.keyCode == 27) && $(this).hasClass('open'))
{
// close on tab or escape
$(this).find(".multiselect.dropdown-toggle").click();
}
else
{
var $items = $(this).find("li:not(.divider):visible a");
if (!$items.length)
return;
var index = $items.index($items.filter(':focus'));
if (e.keyCode == 38 && index > 0) // up
index--;
else if (e.keyCode == 40 && index < $items.length - 1) // down
index++;
else if (!~index)
index = 0;
var $current = $items.eq(index);
$current.focus();
if (e.keyCode == 32 || e.keyCode == 13)
{
var $checkbox = $current.find('input[type="checkbox"]');
$checkbox.prop("checked", !$checkbox.prop("checked"));
}
e.stopPropagation();
e.preventDefault();
}
});
},
// Destroy - unbind - the plugin.
......@@ -202,39 +227,37 @@
$('button', this.$container).html(this.options.buttonText($('option:selected', this.$select)));
},
select: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').addClass('active');
checkbox.prop('checked', true);
select: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.prop('checked', true);
option.attr('selected', 'selected');
option.prop('selected', 'selected');
var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options));
},
deselect: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.parents('li').removeClass('active');
checkbox.prop('checked', false);
},
deselect: function(value) {
var option = $('option[value="' + value + '"]', this.$select);
var checkbox = $('ul li input[value="' + value + '"]', this.$container);
checkbox.prop('checked', false);
option.removeAttr('selected');
option.removeProp('selected');
var options = $('option:selected', this.$select);
$('button', this.$container).html(this.options.buttonText(options));
},
rebuild: function() {
$('ul', this.$container).html('');
this.buildDrowdown(this.$select, this.options);
},
},
rebuild: function() {
$('ul', this.$container).html('');
this.buildDropdown(this.$select, this.options);
},
// Get options by merging defaults and given options.
getOptions: function(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