jquery插件-自定义select

    由于原生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 = [];
   $.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实现三角形状