Commit efdc63a9 authored by David Stutz's avatar David Stutz

Added CSS class and added mobile "support".

Added the CSS class "multiselect" do add additional styling using CSS.
Fixed #23. Added a possible solution for mobile devices.
parent 494f4d0a
...@@ -152,6 +152,8 @@ The width can be defined using all formats accepted by CSS: ...@@ -152,6 +152,8 @@ The width can be defined using all formats accepted by CSS:
50% 50%
auto auto
If the width is defined using CSS the option should be set to false.
**buttonText** **buttonText**
Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter. Defining the text of the button. Must be a function returning a string. All currently selected options are passed as parameter.
...@@ -224,6 +226,17 @@ Refresh the selected elements depending on the selected options within the selec ...@@ -224,6 +226,17 @@ Refresh the selected elements depending on the selected options within the selec
Rebuilds the whole dropdown menu. Selected options will still be selected. Rebuilds the whole dropdown menu. Selected options will still be selected.
## Additional Styling
Additional Styling can be done using the multiselect class:
.multiselect {
text-align: left;
}
.multiselect b.caret {
float: right;
}
## Knockout JS Support ## Knockout JS Support
Thanks to [Devristo](https://github.com/Devristo) this plugin supports [Knockout JS](http://knockoutjs.com/). For further discussion see [the pull requests](https://github.com/davidstutz/bootstrap-multiselect/pull/17). Thanks to [Devristo](https://github.com/Devristo) this plugin supports [Knockout JS](http://knockoutjs.com/). For further discussion see [the pull requests](https://github.com/davidstutz/bootstrap-multiselect/pull/17).
......
This diff is collapsed.
...@@ -53,10 +53,26 @@ ...@@ -53,10 +53,26 @@
this.options = this.getOptions(options); this.options = this.getOptions(options);
this.select = $(select); this.select = $(select);
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
if (this.isMobile()) {
this.select.attr('rows', 1);
}
this.container = $(this.options.buttonContainer) this.container = $(this.options.buttonContainer)
.append('<button type="button" class="dropdown-toggle ' + this.options.buttonClass + '" data-toggle="dropdown">' + this.options.buttonText($('option:selected', select)) + '</button>') .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>'); .append('<ul class="dropdown-menu"></ul>');
if (this.options.buttonWidth) {
$('button', this.container).css({
'width': this.options.buttonWidth
});
}
// Set max height of dropdown menu to activate auto scrollbar. // Set max height of dropdown menu to activate auto scrollbar.
if (this.options.maxHeight) { if (this.options.maxHeight) {
$('ul', this.container).css({ $('ul', this.container).css({
...@@ -66,11 +82,6 @@ ...@@ -66,11 +82,6 @@
}); });
} }
// Manually add the multiple attribute, if its not already set.
if (!this.select.attr('multiple')) {
this.select.attr('multiple', true);
}
this.buildDrowdown(select, this.options); this.buildDrowdown(select, this.options);
this.select this.select
...@@ -111,6 +122,10 @@ ...@@ -111,6 +122,10 @@
maxHeight: 400 maxHeight: 400
}, },
isMobile: function() {
return navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i);
},
constructor: Multiselect, constructor: Multiselect,
buildDrowdown: function(select, options){ buildDrowdown: function(select, 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