欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jquery制作属于自己的select自定义样式_jquery

程序员文章站 2022-04-26 22:18:24
...
由于原生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 = '
'+ ''+ ''+ ''+ ''+ '
    '+ '
    '; $.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 += '
  • '+text+'
  • '; }); $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));

    使用效果图:

    jquery制作属于自己的select自定义样式_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;
    如果觉得有用,可以推荐给朋友哦,小编愿意和大家共同进步。

    以上就是jquery制作select自定义样式的方法,希望大家喜欢。