最近经常与select打交道,因为ie下的select实在太丑了,css怎么搞都搞不好看,因为程序已经写得差不多了,要再去模拟select改动太大,就想着能否不改动select,同时美化它。借鉴一下这篇文章js美化select,然后自己写了一个jquery插件,补充了一些功能。
原理(这里就直接copy啦):
第一步:将表单中的select隐藏起来。
第二步:用脚本找到select标签在网页上的绝对位置。 我们在那个位置上用DIV标签做个假的、好看点的来当他的替身。
第三步:用脚本把select标签中的值读出来。 虽然藏起来了,但它里边的options我们还有用呢,统统取出来。
第四步:当用户点击select标签的替身,也就是div的时候。我们再用一个div浮在上一个div的下边,这个就是options的替身了。
说白了,就是弄一个div把原来的select完整遮住,然后实现弹出层和原来的option交互,难点就是交互。
本文不打算讲怎么实现,源码里有注释,主要是分享,顺便说下几个需要注意的问题以及使用方法,小弟语文渣,凑合着看吧。。。
所有代码全部打包在csdn下载那里,无需积分,下载地址
先贴张效果图chrome,ff,ie,电脑上还是ie11的,ie大家不用说吧,做兼容性,select万恶啊。
使用方法
包含jquery.js,我用的1.8,然后包含jquery.beautifySelect.js,完整html测试代码。
html代码:
1
2
3
4
5
|
<div style=
"margin:20px;"
>
<select id=
"sel1"
></select>
<select id=
"sel2"
></select>
<button onclick=
"redraw()"
>重绘</button>
</div>
|
js代码:
添加select
1
2
3
4
5
6
|
var
_html =
""
;
for
(
var
i = 0;i<22;++i){
_html +=
"<option>"
+i+
"闲来无事写插件"
+
"</option>"
;
}
document.getElementById(
"sel1"
).innerHTML = _html;
document.getElementById(
"sel2"
).innerHTML = _html;
|
调用
1
2
3
4
5
6
7
8
|
$(
"#sel1"
).beautifySelect({
"maxShowItemNum"
: 9,
"downIcon"
:
"url(down.png) right no-repeat"
,
"upIcon"
:
"url(up.png) right no-repeat"
});
$(
"#sel1"
).change(
function
(){
console.log(
this
.value+
"改变"
);
//观察事件
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
function
redraw(){
//如果select内容发生变化,相应重绘部分
var
_html =
""
;
for
(
var
i = 0 ;i<13;++i){
_html +=
"<option>"
+i+
"内容改变啦"
+
"</option>"
;
}
document.getElementById(
"sel1"
).innerHTML = _html;
$(
"#sel1"
).beautifySelect({
"sDivStyle"
: {
"border"
:
"1px solid red"
}
});
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
var
defaultParObj = {
"maxShowItemNum"
: 10,
//默认最多显示10条
"sDivStyle"
: {
//select覆盖层样式
"border"
:
"1px solid #A5A5A5"
,
"fontSize"
:
"12px"
,
"cursor"
:
"default"
},
"hDivStyle"
: {
//弹出层,即下拉样式
"border"
:
"1px solid #7C99B7"
,
"backgroundColor"
:
"#FFF"
,
"maxHeight"
:
"200px"
,
"overflowY"
:
"auto"
},
"ulStyle"
: {
//因为用ul,li模拟的下拉,这里是ul的样式
"fontSize"
:
"12px"
},
"liStyle"
: {
//这是li的样式,就是每一条目
"textIndent"
:
"4px"
,
"height"
:
"20px"
,
"lineHeight"
:
"20px"
,
"cursor"
:
"default"
},
"liOnStyle"
: {
//鼠标移上去的样式
"backgroundColor"
:
"#1E90FF"
,
"color"
:
"#FFF"
},
"liOffStyle"
: {
//鼠标移开的样式
"backgroundColor"
:
"#FFF"
,
"color"
:
"#000"
}
// "downIcon" : "url(...) 0 0",//向上图标
// "upIcon" : "url(...) 0 0"//向下图标
};
注意:
因为使用的div模拟的select,浏览器上,select失去焦点后会关闭下拉,这个暂时还没想到办法实现,以前做过笨方法,
给body添加click事件
,判断target,但是很慢。暂时不管吧,再来项目用模拟的,这个只是 为了不改写好的事件做的美化。
特点:
除了上面说的不能失去焦点关闭,其他事件基本上都实现了,因为参照chrome的样式做的,不过提供属性,可以改样式。
最后附上插件源码,第一次弄,格式老不对,就直接粘了吧,代码打个包放在那啥下载那儿,亲们,欢迎吐槽!
下载链接csdn源代码下载
|