jquery制作属于自己的select自定义样式_jquery
程序员文章站
2022-04-26 22:18:24
...
由于原生select在各个浏览器的样式不统一,特别是在IE67下直接不可以使用样式控制,当PM让你做一个样式的时候,那是相当的痛苦。最好的办法就是使用自定义样式仿select效果。这里写了一个jquery插件,实现自定义的select(阉割了不少原生select的事件,但是最主要的都还在)
需要引用的样式:
'+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));
需要引用的样式:
.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 += ''+ '
使用效果图:
第二个是之前省市联动的插件生成之后,调用自定义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自定义样式的方法,希望大家喜欢。