jQuery多选列表的改进

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();


效果图如下:
[img]http://dl.iteye.com/upload/attachment/151360/50b0ce31-fce4-38da-bc39-93ef3b0bf1a0.jpg[/img]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值