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


Posted in Javascript onNovember 23, 2015

由于原生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));

使用效果图:

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

第二个是之前省市联动的插件生成之后,调用自定义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自定义样式的方法,希望大家喜欢。

Javascript 相关文章推荐
javascript实现动态CSS换肤技术的脚本
Jun 29 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
Jquery简单分页实现方法
Jul 24 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
Vuejs第十三篇之组件——杂项
Sep 09 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
新手必须知的Node.js 4个JavaScript基本概念
Sep 16 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
layui自定义ajax左侧三级菜单
Jul 26 Javascript
基于layui的table插件进行复选框联动功能的实现方法
Sep 19 Javascript
vue项目接口管理,所有接口都在apis文件夹中统一管理操作
Aug 13 Javascript
基于jquery实现省市联动效果
Nov 23 #Javascript
jquery实现加载进度条提示效果
Nov 23 #Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 #Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 #Javascript
Jquery 效果使用详解
Nov 23 #Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
php数组去重实例及分析
2013/11/26 PHP
php获得url参数中具有&amp;的值的方法
2014/03/05 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
Opacity.js
2007/01/22 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
详解Node.js:events事件模块
2016/11/24 Javascript
AnglarJs中的上拉加载实现代码
2018/02/08 Javascript
JS实现十分钟倒计时代码实例
2018/10/18 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
基于python脚本实现软件的注册功能(机器码+注册码机制)
2016/10/09 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
Python使用type动态创建类操作示例
2020/02/29 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
python pip如何手动安装二进制包
2020/09/30 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
建筑公司文秘岗位职责
2013/11/29 职场文书
致接力运动员广播稿
2014/02/17 职场文书
农村结婚典礼司仪主持词
2014/03/14 职场文书
个人委托书
2014/07/31 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014年学校安全工作总结
2014/11/13 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
管理人员岗位职责
2015/02/14 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Android Studio 计算器开发
2022/05/20 Java/Android