jquery插件-自定义select jquery插件-自定义select
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件,实现自定义的select(阉割了不少原生select的事件,但是最主要的都还在)
需要引用的样式:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
.self-select-wrapper{ position : relative ;
display : inline- block ;
border : 1px solid #d0d0d0 ;
width : 250px ;
height : 40px ;
font-size : 14px ;
} div.self-select-wrapper{ /*解决IE67 块级元素不支持display:inline-block*/
* display : inline ;
} .self-select-wrapper .self-select-display{ display : inline- block ;
cursor : pointer ;
width : 100% ;
height : 40px ;
background : -moz-linear-gradient( top , #fff , #eee );
background : -o-linear-gradient( top , #fff , #eee );
background : -webkit-gradient(linear, 0% 0% , 0% 100% , from( #fff ), to( #eee ));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType= 0 ,startColorStr= #ffffff ,endColorStr= #eeeeee );
} .self-select-display .self-select-text{ padding-left : 10px ;
display : inline- block ;
line-height : 40px ;
width : 210px ;
} .self-select-display .self-select-arrow-down{ height : 0 ;
width : 0 ;
overflow : hidden ;
font-size : 0 ;
line-height : 0 ;
display : inline- block ;
vertical-align : middle ;
border-color : #aaa transparent transparent transparent ;
border-style : solid dashed dashed dashed ;
border-width : 7px ;
} .self-select-wrapper .self-select-ul{ position : absolute ;
max-height : 200px ;
_height : 200px ;
border : 1px solid #ccc ;
background-color : #fff ;
top : 41px ;
left : 0px ;
overflow-y: auto ;
_overflow-y: auto !important ;
padding : 0px ;
margin : 0px ;
width : 100% ;
z-index : 2014 ;
display : none ;
} .self-select-wrapper .self-select-ul li{ list-style : none ;
} .self-select-ul .self-select-option{ line-height : 28px ;
cursor : pointer ;
display : block ;
padding-left : 10px ;
text-decoration : none ;
color : #000 ;
} .self-select-ul .self-select-option:hover, .self-select-ul .current{ background-color : #eee ;
} |
js源码:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/** * 解决自定义select自定义样式需求
* select父级元素谨慎使用z-index
*/
( function ($){
var tpl = '<div class="self-select-wrapper">' +
'<span class="self-select-display">' +
'<span class="self-select-text"></span>' +
'<i class="self-select-arrow-down"></i>' +
'</span>' +
'<ul class="self-select-ul"></ul>' +
'</div>' ;
$.fn.selfSelect = function (changeHandler){
var name = $( this ).attr( 'name' );
var $selects = $( this );
function getSourceData($options) {
var text = [];
var value = [];
$.each($options, function () {
text.push($( this ).html());
value.push($( this ).attr( 'value' ));
});
return {
text: text,
value: value
};
}
function buildTpl($selfSelect, $select) {
var valueArr =[];
var textArr = [];
var optionTpl = '' ;
var $options = $select.find( 'option' );
var sourceData = getSourceData($options);
valueArr = sourceData.value;
textArr = sourceData.text;
$select.hide();
$selfSelect.find( '.self-select-text' ).html(textArr[0]);
$.each(textArr, function (seq, text) {
optionTpl += '<li><a class="self-select-option" href="#" value="' +valueArr[seq]+ '">' +text+ '</a></li>' ;
});
$selfSelect.find( '.self-select-ul' ).html(optionTpl);
}
function initSelect() {
//解决多个select问题
$.each($selects, function (i, selectEl) {
var $selfSelect;
var guid = Math.floor(Math.random()*100);
var $select = $(selectEl);
var $parent = $select.parent();
if (!$select.prev().hasClass( 'self-select-wrapper' )) {
$select.before(tpl);
$select.prev().addClass( 'select-' + guid);
$selfSelect = $parent.find( '.select-' + guid);
} else {
$selfSelect = $select.prev();
}
buildTpl($selfSelect, $select);
initEvent($selfSelect, $select)
});
}
function initEvent($selfSelect, $select) {
$selfSelect.find( '.self-select-display' ).off( 'click' ).on( 'click' , function () {
var $selfSelects = $( 'body' ).find( '.self-select-wrapper' );
var isCliked = $( this ).hasClass( 'clicked' );
if (isCliked) {
$( this ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideUp( 'fast' );
} else {
$( this ).addClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideDown( 'fast' );
}
//防止z-index覆盖问题
$.each($selfSelects, function (i, selectEl) {
$(selectEl).css( 'z-index' , 0);
});
$selfSelect.css( 'z-index' , 1);
});
$selfSelect.find( '.self-select-option' ).on( 'mousedown' , function () {
var text = $( this ).html();
var value = $( this ).attr( 'value' );
$( this ).parents( 'ul' ).slideUp( 'fast' );
$selfSelect.find( '.self-select-display' ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-text' ).html(text);
$( this ).addClass( 'current' );
$( this ).parent().siblings().children().removeClass( 'current' );
//修改select的值,并触发change事件
$select.val(value);
$select.trigger( 'change' , value);
});
$(document).on( 'mousedown' , function (e) {
if ($(e.target).hasClass( 'self-select-ul' ) || $(e.target).parent().hasClass( 'self-select-display' )) return ;
$selfSelect.find( '.self-select-display' ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideUp( 'fast' );
});
$select.on( 'change' , function (e, val) {
changeHandler && changeHandler(val);
});
}
initSelect();
return this ;
};
}(jQuery)); |
使用效果图:
第二个是之前省市联动的插件生成之后,调用自定义select生成的
可以在这里查看效果。
自定义sleect优点:
- 样式完全可控
- 兼容IE系列浏览器
- 使用方便,不影响默认的change事件处理
开发中遇到的问题:
1.线性渐变
IE下使用filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee);解决线性渐变问题,详解请参考下面的资料。
2.IE6 A 标签hover问题
IE6不设置href属性,不会触发:hover样式
3.IE 67 块级元素display:inline-block
4.z-index层级问题
改变处于active状态的自定select的z-index
5.css实现下三角,IE下透明问题
设置透明部分的style值为dashed即可。
border-style:solid dashed dashed dashed;
如果觉得有用,可以推荐一下~ 如果有问题,请回复共同探讨~
参考资料:
http://www.colorzilla.com/gradient-editor/ -- css3线性变化兼容各浏览器
http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html -- IE67下block元素设置成inline-block解决方案
http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892 -- z-inxde层级问题
https://github.com/doyoe/blog/blob/master/posts/css/2014-01-21-你需要了解的z-index世界.md -- z-index层级
http://caibaojian.com/css-border-triangle.html -- css实现三角形状
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件,实现自定义的select(阉割了不少原生select的事件,但是最主要的都还在)
需要引用的样式:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
.self-select-wrapper{ position : relative ;
display : inline- block ;
border : 1px solid #d0d0d0 ;
width : 250px ;
height : 40px ;
font-size : 14px ;
} div.self-select-wrapper{ /*解决IE67 块级元素不支持display:inline-block*/
* display : inline ;
} .self-select-wrapper .self-select-display{ display : inline- block ;
cursor : pointer ;
width : 100% ;
height : 40px ;
background : -moz-linear-gradient( top , #fff , #eee );
background : -o-linear-gradient( top , #fff , #eee );
background : -webkit-gradient(linear, 0% 0% , 0% 100% , from( #fff ), to( #eee ));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType= 0 ,startColorStr= #ffffff ,endColorStr= #eeeeee );
} .self-select-display .self-select-text{ padding-left : 10px ;
display : inline- block ;
line-height : 40px ;
width : 210px ;
} .self-select-display .self-select-arrow-down{ height : 0 ;
width : 0 ;
overflow : hidden ;
font-size : 0 ;
line-height : 0 ;
display : inline- block ;
vertical-align : middle ;
border-color : #aaa transparent transparent transparent ;
border-style : solid dashed dashed dashed ;
border-width : 7px ;
} .self-select-wrapper .self-select-ul{ position : absolute ;
max-height : 200px ;
_height : 200px ;
border : 1px solid #ccc ;
background-color : #fff ;
top : 41px ;
left : 0px ;
overflow-y: auto ;
_overflow-y: auto !important ;
padding : 0px ;
margin : 0px ;
width : 100% ;
z-index : 2014 ;
display : none ;
} .self-select-wrapper .self-select-ul li{ list-style : none ;
} .self-select-ul .self-select-option{ line-height : 28px ;
cursor : pointer ;
display : block ;
padding-left : 10px ;
text-decoration : none ;
color : #000 ;
} .self-select-ul .self-select-option:hover, .self-select-ul .current{ background-color : #eee ;
} |
js源码:
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
/** * 解决自定义select自定义样式需求
* select父级元素谨慎使用z-index
*/
( function ($){
var tpl = '<div class="self-select-wrapper">' +
'<span class="self-select-display">' +
'<span class="self-select-text"></span>' +
'<i class="self-select-arrow-down"></i>' +
'</span>' +
'<ul class="self-select-ul"></ul>' +
'</div>' ;
$.fn.selfSelect = function (changeHandler){
var name = $( this ).attr( 'name' );
var $selects = $( this );
function getSourceData($options) {
var text = [];
var value = [];
$.each($options, function () {
text.push($( this ).html());
value.push($( this ).attr( 'value' ));
});
return {
text: text,
value: value
};
}
function buildTpl($selfSelect, $select) {
var valueArr =[];
var textArr = [];
var optionTpl = '' ;
var $options = $select.find( 'option' );
var sourceData = getSourceData($options);
valueArr = sourceData.value;
textArr = sourceData.text;
$select.hide();
$selfSelect.find( '.self-select-text' ).html(textArr[0]);
$.each(textArr, function (seq, text) {
optionTpl += '<li><a class="self-select-option" href="#" value="' +valueArr[seq]+ '">' +text+ '</a></li>' ;
});
$selfSelect.find( '.self-select-ul' ).html(optionTpl);
}
function initSelect() {
//解决多个select问题
$.each($selects, function (i, selectEl) {
var $selfSelect;
var guid = Math.floor(Math.random()*100);
var $select = $(selectEl);
var $parent = $select.parent();
if (!$select.prev().hasClass( 'self-select-wrapper' )) {
$select.before(tpl);
$select.prev().addClass( 'select-' + guid);
$selfSelect = $parent.find( '.select-' + guid);
} else {
$selfSelect = $select.prev();
}
buildTpl($selfSelect, $select);
initEvent($selfSelect, $select)
});
}
function initEvent($selfSelect, $select) {
$selfSelect.find( '.self-select-display' ).off( 'click' ).on( 'click' , function () {
var $selfSelects = $( 'body' ).find( '.self-select-wrapper' );
var isCliked = $( this ).hasClass( 'clicked' );
if (isCliked) {
$( this ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideUp( 'fast' );
} else {
$( this ).addClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideDown( 'fast' );
}
//防止z-index覆盖问题
$.each($selfSelects, function (i, selectEl) {
$(selectEl).css( 'z-index' , 0);
});
$selfSelect.css( 'z-index' , 1);
});
$selfSelect.find( '.self-select-option' ).on( 'mousedown' , function () {
var text = $( this ).html();
var value = $( this ).attr( 'value' );
$( this ).parents( 'ul' ).slideUp( 'fast' );
$selfSelect.find( '.self-select-display' ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-text' ).html(text);
$( this ).addClass( 'current' );
$( this ).parent().siblings().children().removeClass( 'current' );
//修改select的值,并触发change事件
$select.val(value);
$select.trigger( 'change' , value);
});
$(document).on( 'mousedown' , function (e) {
if ($(e.target).hasClass( 'self-select-ul' ) || $(e.target).parent().hasClass( 'self-select-display' )) return ;
$selfSelect.find( '.self-select-display' ).removeClass( 'clicked' );
$selfSelect.find( '.self-select-ul' ).slideUp( 'fast' );
});
$select.on( 'change' , function (e, val) {
changeHandler && changeHandler(val);
});
}
initSelect();
return this ;
};
}(jQuery)); |
使用效果图:
第二个是之前省市联动的插件生成之后,调用自定义select生成的
可以在这里查看效果。
自定义sleect优点:
- 样式完全可控
- 兼容IE系列浏览器
- 使用方便,不影响默认的change事件处理
开发中遇到的问题:
1.线性渐变
IE下使用filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#eeeeee);解决线性渐变问题,详解请参考下面的资料。
2.IE6 A 标签hover问题
IE6不设置href属性,不会触发:hover样式
3.IE 67 块级元素display:inline-block
4.z-index层级问题
改变处于active状态的自定select的z-index
5.css实现下三角,IE下透明问题
设置透明部分的style值为dashed即可。
border-style:solid dashed dashed dashed;
如果觉得有用,可以推荐一下~ 如果有问题,请回复共同探讨~
参考资料:
http://www.colorzilla.com/gradient-editor/ -- css3线性变化兼容各浏览器
http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html -- IE67下block元素设置成inline-block解决方案
http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892 -- z-inxde层级问题
https://github.com/doyoe/blog/blob/master/posts/css/2014-01-21-你需要了解的z-index世界.md -- z-index层级
http://caibaojian.com/css-border-triangle.html -- css实现三角形状