首页 > 代码库 > jquery插件-自定义select

jquery插件-自定义select

2024-07-11 09:23:06   229人阅读

    由于原生select在各个浏览器的样式不统一，特别是在IE67下直接不可以使用样式控制，当PM让你做一个样式的时候，那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件，实现自定义的select（阉割了不少原生select的事件，但是最主要的都还在）
 
    需要引用的样式：
   
 .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源码：
   
 /** * 解决自定义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 = http://www.mamicode.com/[];"self-select-option" href="http://www.mamicode.com/#" value="http://www.mamicode.com/‘+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 = http://www.mamicode.com/$(this).attr(‘value‘);>
 
使用效果图：
第二个是之前省市联动的插件生成之后，调用自定义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实现三角形状


联系
我们