IE自带的select控件实在不好看..
这里改造了Ethan Miller的一个基于jQuery 的 Simple Multi-Select, 让其能重新构建, 这样便可以在不断变化的多选select中使用了.
目前这里有个小问题,列表在IE6下会出现click错误.考虑了一下,还是使用change来代替click事件.还未能查到是否为jQuery在IE6下兼容问题.
/* jQuery Simple Multi-Select plugin 0.9
*
* Copyright (c) 2009 Ethan Miller
* http://ethanmiller.name/notes/jquery_simplemultiselect/
*
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*
*/
(function($){
$.fn.extend({
simpleMultiSelect : function(options){
settings = $.extend({
highlight : '#CCE',
border : '#777',
width : 350,
height : 150}, options);
var select = this;
return this.each(function(){
// wrapping select in a div so that the select and pseudo select
// will be siblings
$(this).wrap('<div class="sms-container"></div>');
var divselect = $('<div class="sms-pseudo-select"></div>');
$('option', this).each(function(){
var op = $(this);
var dv = $('<div/>').data('v', op.val()).text(op.text());
dv.css({"cursor" : "pointer", "border-bottom" : "1px solid #ABB3DE"});
if(op.attr('selected')){
// highlight pseudo option on load
dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
}
dv.click(function(){
// we still have references to op and dv here ...
if(op.attr('selected')){
//de-select
op.removeAttr('selected');
dv.css({'background-color' : 'transparent', "font-weight" : "normal"});
}else{
//select
op.attr('selected', true);
dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
}
select.click(); //IE6在这里会出现问题
});
divselect.append(dv);
});
divselect.css({
width : settings.width,
height : settings.height,
cursor : "default",
overflow : "auto",
border : "1px solid " + settings.border});
$(this).after(divselect).hide();
});
// return this;
},
//如果实体Select发生变化,需要rebuilt一下
rebuilt : function(){
var select = this;
return this.each(function(){
// wrapping select in a div so that the select and pseudo select
// will be siblings
select.parent().find(".sms-pseudo-select").remove();
var divselect = $('<div class=\"sms-pseudo-select\"></div>');
$('option', this).each(function(){
var op = $(this);
var dv = $('<div/>').data('v', op.val()).text(op.text());
dv.css({"cursor" : "pointer", "border-bottom" : "1px solid #ABB3DE"});
if(op.attr('selected')){
// highlight pseudo option on load
dv.css({'background-color' : settings.highlight , "font-weight" : "bold"});
}
dv.click(function(){
// we still have references to op and dv here ...
if(op.attr('selected')){
//de-select
op.removeAttr('selected');
dv.css({'background-color' : 'transparent', "font-weight" : "normal"});
}else{
//select
op.attr('selected', true);
dv.css({'background-color' : settings.highlight, "font-weight" : "bold"});
}
select.change();
});
divselect.append(dv);
});
divselect.css({
width : settings.width,
height : settings.height,
cursor : "default",
overflow : "auto",
border : "1px solid " + settings.border});
$(this).after(divselect).hide();
});
// return this;
},
smsNone : function(){
return this.each(function(){
siblingDivSet(this).each(function(){
var psop = $(this);
if(psop.css('background-color') != 'transparent'){
psop.click();
}
});
});
},
smsAll : function(){
return this.each(function(){
siblingDivSet(this).each(function(){
var psop = $(this);
if(psop.css('background-color') == 'transparent'){
psop.click();
}
});
});
}
});
function siblingDivSet(sel){
// expects a select object, return jquery set
return $(sel).siblings('div.sms-pseudo-select').children('div');
}
})(jQuery);
使用时加载, 页面运行时需要重建select的话也是如下:
$("#yearSelector").simpleMultiSelect({
highlight : '#BFDAEB',
border : '#7f9db9',
width : 125,
height : 80
});
//重建
$("#yearSelector").rebuilt();
//全选
$("#yearSelector").smsAll();
//反选
$("#yearSelector").smsNone();
效果图如下:
- 大小: 18.7 KB
分享到:
相关推荐
jquery实现用户信息左右选择特效 改进了多选列表的选择非(select多选框左右移动), 能添加的信息更多,操作也更多,容易移植和更改。 打包文件包含了jquery1.8
本文是利用EasyUI实现下拉框多选功能,在ComboxTree其原有的基础上对样式进行了改进,样式表已上传demo,代码如下 二、代码 <!DOCTYPE ...
记得之前发表过一篇《Jquery简单应用总结》,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些。 我的双向选择器支持批量...
filebox:'files'方法允许用户获取选择的文件列表; searchbox:优化'selectName'方法。 jQuery EasyUI 1.5.3 版本更新内容 Bug(修复) combobox:修复在标签中初始化组件时无法正确解析'iconCls'属性的问题; ...
Improvement(改进) treegrid:所有的选择和选中的方法都扩展自datagrid组件; linkbutton:添加图标对齐功能的完整支持,可用值有:“top”、“bottom”、“left”、“right”; linkbutton:添加“size”属性...
datalist:该组件是展示列表数据的组件,用户可以对列表数据进行分组、单选、多选等各种操作; navpanel:该组件是移动端框架的根组件; mobile:filebox 该组件提供了移动页面堆栈管理和导航。
在处理中等长度以上的选择列表时,尤其是多选列表。 常见的方法是使用标签,例如 来源: 这种方法适用于较小的列表。 当用户可以选择20、30、100多个选项时,该选项将变得难以处理。 例如,您有一个内部员工邮件...
jQuery UI MultiSelect小部件MultiSelect逐步将普通的多选控件增强为优雅的复选框下拉列表,可通过ThemeRoller进行样式设置。演示页查看演示页面版本3 小部件的版本3在预发行版本中可用。 这引入了许多新功能和实质...
AngularJS下拉多选 该指令为您提供了具有AngularJS指令功能的Bootstrap Dropdown。 注意:我目前正在此指令的v2上进行性能改进,并消除了对lodash的需要。 预计到达时间:2015年4月 特征 基于Bootstrap的下拉菜单。...
基于layui框架的下拉框加强版,初始版本具备基础数据展现、异步加载、数据回调、异步返回数据自定义、默认选项等功能,支持单选和多选,内部使用 form 和 jQuery 模块。在原版的基础上,改进了使用场景,可以指定值...
1.[改进]去掉旧版AJAXRequest换成jQuery中的AJAX 2.[改进]为了系统安全和稳定去掉宇初验证码和印象码,加入4种数字验证码、1种中文验证码、1种计算题验证码供用户选择 3.[改进]为了后台系统安全,后台登录页不用判断...
8.[纠正]纠正部分浏览器后台列表管理的多选处理按钮和下拉菜单失效的BUG 9.[改变]后台兼容模式提升到IE8模式 10.修复其他诸多小细节 2013年07月19日 V2.74更新包 1.[新增]后台引导页加入非IE浏览器提示,后台部分...
替换和改进您的 HTML带样式且不带 jQuery 的字段! tail.select 脚本回来了,用普通的 JavaScript 重写,准备美化和扩展你的 HTML领域……再次!为您的 Web 应用程序添加搜索栏、多选实用程序(例如全选或不选按钮)...