Commit 67eb61ef authored by David Stutz's avatar David Stutz

Updated documentation/README. Cosmetics.

Updated documentation: includeSelectAll, selectAllText, selectedClass,
enabledFiltering and filterPlaceholder options. Updated the README.
moved the filter initialization to the buildDropdown method. The rebuild
method has to remove the search field, too, otherwise it will be
duplicated.
parent cbc25723
...@@ -188,6 +188,10 @@ The used container holding both the dropdown button and the dropdown menu. ...@@ -188,6 +188,10 @@ The used container holding both the dropdown button and the dropdown menu.
}); });
}); });
**selectedClass**
The class applied to the parent `<li>` of selected items. Default: active.
**dropRight** **dropRight**
Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false. Define if the menu should drop to the right of the button or not, by adding `pull-right` class to `<ul class="dropdown-menu">`. Default is false.
...@@ -196,6 +200,10 @@ Define if the menu should drop to the right of the button or not, by adding `pul ...@@ -196,6 +200,10 @@ Define if the menu should drop to the right of the button or not, by adding `pul
Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false. Define if a `<option value="select-all-option"> Select all</option>` should be appended at the beginning of the options list. When this item is clicked, it will check/uncheck other items. This only works when `multiple="multiple"` is enabled. Default is false.
**selectAllText**
Defines the label of the select all option.
**enableFiltering** **enableFiltering**
Define if a text input should be created to filter results. Note that 'select all' option will select all **FILTERED** options. Default is false. Define if a text input should be created to filter results. Note that 'select all' option will select all **FILTERED** options. Default is false.
...@@ -252,7 +260,7 @@ Deselects an option by its value. ...@@ -252,7 +260,7 @@ Deselects an option by its value.
## Additional Styling ## Additional Styling
Additional Styling can be done using the multiselect class: Additional Styling can be done using the following classes:
.multiselect { .multiselect {
text-align: left; text-align: left;
...@@ -260,8 +268,19 @@ Additional Styling can be done using the multiselect class: ...@@ -260,8 +268,19 @@ Additional Styling can be done using the multiselect class:
.multiselect b.caret { .multiselect b.caret {
float: right; float: right;
} }
.multiselect-group {
font-weight: bold;
text-decoration: underline;
}
.multiselect-all label {
font-weight: bold;
}
.multiselect-search {
color: red;
}
## Usage via data attributes ## Usage via Data Attributes
To hook up the control via data attributes, add the `data-role="multiselect"` attribute to your `<select>`. All selects with that attribute will be automatically wired up on jQuery load. To hook up the control via data attributes, add the `data-role="multiselect"` attribute to your `<select>`. All selects with that attribute will be automatically wired up on jQuery load.
...@@ -287,10 +306,6 @@ Thanks to [@robwesterlund](https://twitter.com/robwesterlund) for the hint :) ...@@ -287,10 +306,6 @@ Thanks to [@robwesterlund](https://twitter.com/robwesterlund) for the hint :)
> **@robwesterlund** - *@luisrudge The reason is that the multiselect plugin works on the option elements which are in the DOM. However, if you place your bindingHandler before the options bindingHandler, there won't be any option elements in the DOM when you call the multiselect plugin.* > **@robwesterlund** - *@luisrudge The reason is that the multiselect plugin works on the option elements which are in the DOM. However, if you place your bindingHandler before the options bindingHandler, there won't be any option elements in the DOM when you call the multiselect plugin.*
## 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.
## License ## License
Copyright 2012 David Stutz Copyright 2012 David Stutz
......
This diff is collapsed.
This diff is collapsed.
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