效果：http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/
特性
- 支持点击label实现checkbox组选择.
- 头部选项，如全选/ 取消全选 /关闭功能.
- 支持键盘选择.
- 支持5种不同的事件回调函数.
- 以列表方式显示选中项目，并且可以设置最大显示值.
- 方便改变位置，渐变速度，滚动容器的高度，链接文字，文本框默认内容等.
- 最小版只有 6.9kb.
兼容性
- Firefox 2 – 3.6
- IE 6 – 8
- Chrome Beta/4
- Safari 4
- Opera 10
用法
首先需要引入 jquery 1.4、jQuery UI theme, 和 jquery.multiselect.css . 我们在这用的不是jQuery UI library本身,而是他的主题文件. 最简单的绑定select box方法:
- <select id="MySelectBox" multiple="multiple" name="MySelectBox"> <option value="1">Option 1</option> <option value="2">Option 2</option></select>
- $(document).ready(function(){
- $("#MySelectBox").multiSelect();
- });
回调函数
比如其中的 onOpen 回调函数, 如:
- $("#MySelectBox").multiSelect({
- onOpen: function(){
- var $checkboxes = $(this).find('input');
- }
- });
onClick 回调函数. Example:
- $("#MySelectBox").multiSelect({
- onClick: function(){
- if(this.checked){
- alert("I was just checked!");
- }
- }
- });
更多回调函数请看下面列表.
重载项
参数选项均在 $.fn.multiSelect.defaults中保存 , 你可以如下改变默认选项:
- // set the minWidth parameter for all instances to 500 pixels
- .fn.multiSelect.defaults.minWidth = 500;
Passing a function to the selectedText parameter
As of 0.5, the selectedText parameter can accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. As you can see in the example, this gives you 100% control of the display:
- $("#MySelectBox").multiSelect({
- selectedText: function(numChecked, numTotal, checkedInputs){
- // example: emulating the default behavior
- return numChecked + " checked";
- // example: emulating the selectedList option
- return (numChecked < = 5)
- ? checkedInputs.map(function(element){ return element.title; }).join(', ')
- : numChecked + " checked";
- }
- });
| Parameter | Description | Default |
|---|---|---|
| showHeader | A boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links. | true |
| maxHeight | The maximum height in pixels of the scrolling container that holds the checkboxes. | 175 |
| minWidth | The minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element. |
200 |
| checkAllText | The default text of the “Check all” link. | Check all |
| unCheckAllText | The default text of the “Uncheck all” link. | Uncheck all |
| noneSelectedText |
Renamed from
noneSelected in 0.5!The default text the select box when no options have been selected. |
Select options |
| selectedList | A boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled. |
false |
| selectedText | The text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”.
New in 0.5!
As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples. |
# selected |
| position | The position of the options menu relative to the input control: top, middle, or bottom. | bottom |
| shadow | A boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow). | false |
| fadeSpeed | How fast (in ms) to fade out the options menu on close. | 200 |
| state |
New in 0.5!
The default state of the widget. Either open or closed. |
closed |
| disabled |
New in 0.5!
Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this. |
false |
| onCheck | A callback to fire when a checkbox is checked. | Function |
| onOpen | A callback to fire when the options menu is opened. | Function |
| onCheckAll | A callback to fire when the “Check all” link is clicked. | Function |
| onUncheckAll | A callback to fire when the “Uncheck all” link is clicked. | Function |
| onOptgroupToggle | A callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument. |