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实现三角形状
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步