jQuery多选插件
下载地址:http://github.com/ehynds/jquery-multiselect
效果: 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 behaviorreturn numChecked + " checked"; // example: emulating the selectedList optionreturn (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. | Function |
jQuery多选插件相关推荐
- html css 多选下拉框,jQuery多选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件.该插件可以将select元素转换为带checkbox的多选下拉框,非常实用. 使用方法 在页面中引入下面的文件. lt;l ...
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- jQuery Form Plugin (jquery表单插件)
jQuery表单插件 jQuery.form 这是一个全面支持表单的jQuery插件,支持文件上传,包含以下一些方法: -ajaxForm -ajaxSubmit - formToArray - fo ...
- jqgrid表格下拉搜索多选框优化—使用select下拉多选插件
jqgrid表格插件应该是表格插件中最强大吧,最近项目需要使用jqgrid但又要根据项目需求进行一些私人订制,还好jqgrid的源码写清晰易懂. jqgrid有个下拉搜索的功能,我们先看下官网的展示, ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...
- jQuery在线选座订座(影院篇)
jQuery在线选座订座(影院篇) 原文:jQuery在线选座订座(影院篇) 我们在线购票时(如电影票.车票等)可以自己选座.开发者会在页面上列出座次席位,用户可以一目了然的看到可以选择的座位及支付. ...
- 8 个最好的 jQuery 树形 Tree 插件
由于其拥有庞大,实用的插件库,使得jQuery变得越来越流行.今天将介绍一些最好的jQuery树形视图插件,具有扩展和可折叠的树视图.这些都是轻量级的,灵活的jQuery插件,它将一个无序列表转换为可 ...
- jQuery 图像裁剪插件Jcrop
Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能. Jcrop是一款免费的软件,采用MIT License发布. 注: ...
最新文章
- YII2 载入默认值 loadDefaultValues
- mysql数据库垂直切分_mysql数据库的水平拆分与垂直拆分
- DRF (Django REST framework) 框架介绍
- JavaEE的13种核心技术
- 学习使用新浪接口随笔(一)
- Apache Flink 进阶入门(二):Time 深度解析
- TIOBE 2021年3月程序语言排名 - python要超越Java排第二了?
- (24)FPGA开发必备(FPGA不积跬步101)
- 如果你不会扒谱,来吧,这款软件给你超能力
- matlab 文本分析工具,MATLAB,Simulink. - Text Analytics , 文本分析工具箱-鈦思科技
- 【步步到位】mysql安装教程 8.0.26
- Linux学习笔记(六) -- Anjuta软件主界面介绍
- ubuntu部署NVIDIA驱动和CUDA及CUDNN
- opencv应用实例-金圣韬-专题视频课程
- rounding mode
- 基于android的共享车位app
- 名爵5显示服务器异常,名爵5危险警告灯异常闪烁
- 8.3列表/菜单/文本域标记
- oCPC实践录 | 糟糕,广告主成本超了!
- 北京外企 外服控股:人服国企借道资产重组上市,发 力数字化谋新篇
热门文章
- A+B问题(信息学奥赛一本通-T1006)
- 信息学奥赛C++语言:石头剪子布
- 关系 base_weather 不存在_国培教育-2020江苏公务员考试:反对关系真的好用吗?...
- seafile安装教程 Linux,CentOS7安装seafile开源版
- 操作mysql_MySQL 事务操作
- android 添加ga_android开发步步为营之70:android接入Google Analytics总结
- phpcms导航高亮:“首页” 高亮显示(含代码、截图、案例)
- CSS3特效 - 呼吸灯效果
- 在PHP中数组有两种形式区别,PHP三种数组合并方式区别示例
- mysql geocode_百度地图Geocoding API获取特定地区或地址的经纬度信息,然后在MySql数据库多表循环遍历更新...