Skip to content

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

Scrollbar support, option names. 

Added support for adding a maximum height property to the dropdown list.
Renamed some options.
parent 6a3fbe8e
Expand all Show whitespace changes
Inline Side-by-side
Showing with 154 additions and 73 deletions
README.md
View file @ b9378c3f
......@@ -2,6 +2,8 @@
Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown as dropdown menu containing the single options as checkboxes.
**Note:** The option names may have changed due to the latest updates.
## Demo
A demo of different configurations can be found [here](http://davidstutz.github.com/bootstrap-multiselect/).
......@@ -22,17 +24,17 @@ These examples can also be seen in action in index.html:
$('#example1').multiselect();
$('#example2').multiselect();
$('#example3').multiselect({
button: 'btn btn-link'
buttonClass: 'btn btn-link'
});
$('#example4').multiselect({
button: 'btn btn-small'
buttonClass: 'btn btn-small'
});
$('#example5').multiselect({
button: 'btn btn-primary disabled'
buttonClass: 'btn btn-primary disabled'
});
$('#example6').multiselect();
$('.example7').multiselect({
container: '<span class="dropdown" />',
buttonContainer: '<span class="dropdown" />',
});
});
</script>
......@@ -124,23 +126,23 @@ These examples can also be seen in action in index.html:
## Configuration Options
**button**
**buttonClass**
Define the appearance of the button using classes. See the [Bootstrap documentation](http://twitter.github.com/bootstrap/base-css.html#buttons) for more information.
$(document).ready(function() {
$('.multiselect').multiselect({
'none': 'select something...'
buttonClass: 'btn btn-small'
});
});
**width**
**buttonWidth**
The width of the dropdown button.
$(document).ready(function() {
$('.multiselect').multiselect({
'width': 'auto', // Default
buttonWidth: 'auto', // Default
});
});
......@@ -150,53 +152,64 @@ The width can be defined using all formats accepted by CSS:
50%
auto
**text**
**buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
$(document).ready(function() {
$('.multiselect').multiselect({
'text': function(options) {
buttonText: function(options) {
if (options.length == 0) {
return 'None selected';
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected';
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
});
});
**container**
**buttonContainer**
The used container holding both the dropdown button and the dropdown menu.
$(document).ready(function() {
$('.multiselect').multiselect({
container: '<span class="dropdown" />',
buttonContainer: '<span class="dropdown" />',
});
});
**onchange**
**onChange**
Assign an event handler to the change event:
$(document).ready(function() {
$('.multiselect').multiselect({
onchange:function(element, checked){
onChange:function(element, checked){
alert('Change event invoked!');
console.log(element);
}
});
});
**maxHeight**
Define the maximum height property of the dropdown list. If the maximum height of the option list is exceeded a scrollbar will be displayed.
$(document).ready(function() {
$('.multiselect').multiselect({
// Or false for no maximum height.
maxHeight: 400,
});
});
## Methods
**.multiselect('destroy')**
......
index.html
View file @ b9378c3f
This diff is collapsed.
js/bootstrap-multiselect.js
View file @ b9378c3f
......@@ -24,10 +24,19 @@
this.options = this.getOptions(options);
this.select = $(select);
this.container = $(this.options.container)
.append('<button type="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>')
this.container = $(this.options.buttonContainer)
.append('<button type="button" style="width:' + this.options.buttonWidth + '" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>')
.append('<ul class="dropdown-menu"></ul>');
// Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) {
$('ul', this.container).css({
'max-height': this.options.maxHeight + 'px',
'overflow-y': 'auto',
'overflow-x': 'hidden',
});
}
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
......@@ -36,12 +45,13 @@
// Build the dropdown.
$('option', this.select).each($.proxy(function(index, element) {
if ($(element).is(':selected')) {
$(element).attr('selected', true);
$(element).attr('selected', 'selected');
$(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;width:100%;height:100%;cursor:pointer;"><input style="margin-bottom:5px;" type="checkbox" value="' + $(element).val() + '" /> ' + $(element).text() + '</label</a></li>');
var selected = $(element).attr('selected') || false;
var selected = $(element).prop('selected') || false;
var checkbox = $('ul li input[value="' + $(element).val() + '"]', this.container);
checkbox.prop('checked', selected);
......@@ -66,12 +76,19 @@
}
var option = $('option[value="' + $(event.target).val() + '"]', this.select);
option.attr('selected', checked);
if (checked) {
option.attr('selected', 'selected');
option.prop('selected', 'selected');
}
else {
option.removeAttr('selected');
}
console.log(option);
var options = $('option:selected', this.select);
$('button', this.container).html(this.options.text(options) + ' <b class="caret"></b>');
$('button', this.container).html(this.options.buttonText(options));
this.options.onchange(option, checked);
this.options.onChange(option, checked);
}, this));
$('ul li a', this.container).on('click', function(event) {
......@@ -82,28 +99,34 @@
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) {
buttonText: function(options) {
if (options.length == 0) {
return 'None selected';
return 'None selected <b class="caret"></b>';
}
else if (options.length > 3) {
return options.length + ' selected';
return options.length + ' selected <b class="caret"></b>';
}
else {
var selected = '';
options.each(function() {
selected += $(this).text() + ', ';
});
return selected.substr(0, selected.length -2);
return selected.substr(0, selected.length -2) + ' <b class="caret"></b>';
}
},
container: '<div class="btn-group" />',
onchange:function(){}
// Is triggered on change of the selected options.
onChange: function() {
},
buttonClass: 'btn',
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
// Maximum height of thet dropdown menu.
// If maximum height is exceeded a scrollbar will be displayed.
maxHeight: 400,
},
constructor: Multiselect,
......@@ -131,7 +154,7 @@
}
}, this));
$('button', this.container).html(this.options.text($('option:selected', this.select)) + ' <b class="caret"></b>');
$('button', this.container).html(this.options.buttonText($('option:selected', this.select)));
},
// 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