- 浏览: 13639515 次
- 性别:
- 来自: 洛杉矶
文章分类
- 全部博客 (1994)
- Php / Pear / Mysql / Node.js (378)
- Javascript /Jquery / Bootstrap / Web (435)
- Phone / IOS / Objective-C / Swift (137)
- Ubuntu / Mac / Github / Aptana / Nginx / Shell / Linux (335)
- Perl / Koha / Ruby / Markdown (8)
- Java / Jsp (12)
- Python 2 / Wxpython (25)
- Codeigniter / CakePHP (32)
- Div / Css / XML / HTML5 (179)
- WP / Joomla! / Magento / Shopify / Drupal / Moodle / Zimbra (275)
- Apache / VPN / Software (31)
- AS3.0/2.0 / Flex / Flash (45)
- Smarty (6)
- SEO (24)
- Google / Facebook / Pinterest / SNS (80)
- Tools (22)
最新评论
-
1455975567:
xuezhongyu01 写道wocan23 写道我想问下那个 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
xuezhongyu01:
wocan23 写道我想问下那个111.1是怎么得来的我也看不 ...
Mysql: LBS实现查找附近的人 (两经纬度之间的距离) -
18335864773:
试试 pageoffice 在线打开 PDF 文件吧. pag ...
jquery在线预览PDF文件,打开PDF文件 -
青春依旧:
opacity: 0.5; 个人喜欢这种方式!关于其他css特 ...
css透明度的设置 (兼容所有浏览器) -
July01:
推荐用StratoIO打印控件,浏览器和系统的兼容性都很好,而 ...
搞定网页打印自动分页问题
下载地址: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 behavior return numChecked + " checked"; // example: emulating the selectedList option return (numChecked < = 5) ? checkedInputs.map(function(element){ return element.title; }).join(', ') : numChecked + " checked"; } });
参数
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 |
- ehynds-jquery-multiselect-0.6-2-gdbb96e1.zip (15.9 KB)
- 下载次数: 684
发表评论
-
使用jQuery和Pure.CSS创建一个可编辑的表格
2016-08-26 02:24 1182使用开源组件真的可以 ... -
2016十大优秀jQuery插件推荐
2016-08-26 02:24 2262当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时 ... -
jQuery .tmpl() 用法
2016-08-26 02:22 1176参考效果: DEMO 下载: jquery-tmpl-ma ... -
jQuery:从零开始,DIY一个jQuery(2)
2016-08-19 03:06 1014在上篇文章我们简单实 ... -
jQuery:从零开始,DIY一个jQuery(1)
2016-08-19 03:00 944从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅 ... -
Bootstrap 3: 菜单居中 Center content in responsive bootstrap navbar
2016-08-18 06:15 1552先看上面图片的效果,下面是代码: .navbar .nav ... -
jQuery: 操作select option方法集合
2016-08-18 06:06 3302每一次操作select的时候,总是要谷歌一下资料,真是太不爽 ... -
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
2016-08-16 05:31 1203原文:http://www.codeceo.com/arti ... -
jQuery: 选择器(DOM,name,属性,元素)
2016-08-11 01:17 4462出处:http://www.cnblogs.com/star ... -
jQuery: 合并表格中相同文本的相邻单元格
2016-08-01 08:02 1340一、效果 二、代码 <!DOCTYPE ... -
Bootstrap 3: 使用注意box-sizing细节及解决方法
2016-08-01 07:58 1558一、bootstrap样式 在Bootstrap v3.3 ... -
域名详解
2016-07-29 12:51 824域名 域名就是用来唯 ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-20 13:39 2277代码: <link href="http: ... -
Bootstrap 3: 图标转换事件 Change icons when toggle
2016-07-19 07:12 718代码: <link href=" ... -
jQuery:无限循环两个或者多个事件 click / toggle between two functions
2016-07-19 07:12 1593插件: (function($) { $.fn. ... -
javascript 中面向对象实现 如何继承
2016-07-14 01:01 504上一篇博客已经说了关于javascript中的封装, 其中也 ... -
javascript 中的面向对象实现 如何封装
2016-07-12 12:27 1181javascript 是一门很灵活的语言,也是一门有缺陷的语 ... -
AngularJS jQuery 共存法则
2016-06-14 05:26 3574寻找正确的方法,如何在AngularJS里使用jQuery ... -
七步从Angular.JS菜鸟到专家(3):数据绑定和AJAX
2016-06-04 05:28 1102AngularJS学习列表:七步 ... -
七步从Angular.JS菜鸟到专家(2):Scopes
2016-06-04 05:27 696AngularJS学习列表:七步走 Angular.js 从 ...
相关推荐
一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
Jquery多选下拉列表插件jquery multiselect
web前端插件+下拉多选复选框,可用于后台多选数据,前端也可以使用,插件可以二开也可以
jQuery多选和单选下拉框插件
jquery.multi-select.js是一款jQuery多选下拉框插件。该插件可以将select元素转换为带checkbox的多选下拉框,非常实用。
jquery.multiselect 下拉多选插件 下拉复选框插件 可以直接使用的demo
可以放到项目中用 mutiselect 下拉多选插件 可以放到项目中用 多选下拉列表 复选下拉列表 jquery多选列表 多选多级联动下拉列表,有demo
使用jquery实现的风格的多选下拉框demo,直接打开index.html就可以使用。适合集成到后台系统的多选下拉框业务场景
jQuery Select下拉框分类菜单多选插件一款功能比较全面的自定义下拉菜单选项多选代码,除了可以对选项进行分类,还带有搜索功能。
jQuery下拉复选菜单,可实现多选全选功能,并提供下拉框内实时搜索
jQuery单选多选按钮美化代码插件是一款基于ion.checkRadio.js插件制作的单选按钮多选按钮美化样式。
jQuery下拉城市单选多选插件是一款支持单选和多选的select下拉框城市选择代码,还支持输入关键词检索城市。
用jquery写的多选下拉框,漂亮大气好用,bootstrap风格,样式都是现成的,包你满意,jquery写的容易改造方便从后台读取数据
js 下拉层级多选_jQuery下拉多选插件ySelect.js,可多选,单选 下载可直接使用
下拉条件多选插件jQuery特效下载 下拉条件多选插件jQuery特效下载
强大的jquery下拉框插件 下拉框展示带列表分页功能,适合下拉框大量数据展示 下拉框带快速查找,可以快速筛选 支持多选 基于jQuery、Bootstrap2、3开发 也可应用于无任何UI框架的原生HTML环境 Autocomplete输入自动...
jQuery下拉框菜单多选插件是一款带搜索的下拉框多选,下拉框验证,模拟select下拉框多选菜单效果代码。
js代码 [removed][removed] [removed] $('.form-control-chosen').chosen({ allow_single_deselect: true, ... $('.form-control-chosen-required').chosen({ ... $('[title="clickable_optgroup"]').addClass('...
jquery单选多选美化插件,支持单选,多选,美化UI,喜欢多多支持哟
jQuery多选插件ySelect.js,支持反选,搜索,分组。