Box {
display: none;
position: absolute;
left: 0;
top: 31px;
width: 100%;
}
.select-style.up .opn-
Box {
top: auto;
bottom: 31px;
}
.select-style .opn-
Box .opn-list {
position: relative;
_width: 100%;
max-height: 130px;
border: 1px solid #d6d6d6;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
}
.select-style.focus .opn-
Box .opn-list { border-color: #53a8df; }
.select-style .opn-
Box .opn-list li {
display: block;
_width: 100%;
padding-left: 5px;
line-height: 26px;
height: 26px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
}
.select-style .opn-
Box .opn-list .selected { background: #d4edfe; }
.select-style .opn-
Box .opn-list li:hover {
color: #fff;
background: #65abda;
}
.select-style .opn-
Box .opn-list li.disabled {
color: #cacaca;
background: #f0f0f0;
cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
color: #cacaca;
background-color: #f0f0f0;
cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框样式 结束 */
显示5个
width: 200,//默认宽200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
direction: "down",//向下拉，另一个是up
disabled: false //不可用时为true
},o || {});
return this.each(function(){ //构造开始
if($(this).children(".slt-wrap")){ //去重复
$(this).children(".slt-wrap").remove();
};
var $ts = $(this),$select = $ts.find("select").eq(0),wid = parseFloat($ts.attr("width")),num = parseFloat($ts.attr("max-num")),$sltWrap = $("
").prependTo($ts),$sltTit = $("
").prependTo($sltWrap),$sltText = $(".slt-text",$sltTit),$opn
Box = $("
").appendTo($sltWrap),$opnList = $(".opn-list",$opn
Box);
$ts.addClass("select-style"); //
增加一个class专门作为写css样式用
$select.find("option").each(function(i){ //循环
生成li
标签
var text = $(this).text(),$li = $("
"+text+"").appendTo($opnList);
if(this.selected){
$li.addClass("selected");
$sltText.text(text).attr("title",text);
};
if(this.disabled){
$li.addClass("disabled");
return;
};
});
var $li = $("li",$opnList),hei = $li.height();
if(wid){ //设置宽度
$ts.css("width",wid+"px"); //兼容IE6、7
$sltWrap.css("width",wid-2+"px");
}else{
$ts.css("width",o.width+"px"); //兼容IE6、7
$sltWrap.css("width",o.width-2+"px");
};
if(num){ //设置高度
$opnList.css("max-height",hei*num+"px");
}
else{
$opnList.css("max-height",hei*o.maxNum+"px");
};
if(o.direction == "up"){ //设置上、下拉方向
$ts.addClass("up");
};
$li.on("click",function(){ //li
标签的点击事件，传给原生select
var index = $opnList.find("li").index(this),text = $(this).text();
if($(this).hasClass("disabled")){
return false;
};
$(this).addClass("selected").siblings().removeClass("selected");
$select.find("option").prop("selected",false).eq(index).prop("selected",true);
$sltText.text(text).attr("title",text);
$opn
Box.hide();
$ts.removeClass("focus");
});
$sltTit.on("click",function(e){ //a
标签的点击下拉事件
e.stopPropagation(); //阻止a
标签的点击冒泡
if($opn
Box.is(":hidden")){
$(".select-style .opn-
Box").hide();
$(".select-style").removeClass("focus");
$opn
Box.show();
$ts.addClass("focus");
}
else{
$opn
Box.hide();
$ts.removeClass("focus");
}
});
$select.on("change",function(){ //原生select的点击事件，传给ul
var index = $(this).find("option:selected").index(),text = $li.eq(index).text();
$li.eq(index).addClass("selected").siblings().removeClass("selected");
$sltText.text(text).attr("title",text);
});
$(document).on("click",function(e){ //点击其他地方收起下拉框
if($opn
Box.is(":visible")){
$opn
Box.hide();
$ts.removeClass("focus");
}
});
if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
$sltTit.off("click"); //设置禁用状态
$select.prop("disabled",true);
$ts.addClass("disabled");
};
});
};
})(jQuery);
