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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
Javascript 自定义类型方法小结
Mar 02 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
js自定义回调函数
Dec 13 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
Dec 08 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
php中的观察者模式简单实例
2015/01/20 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
轻松创建nodejs服务器(10):处理POST请求
2014/12/18 NodeJs
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
2015/10/28 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
2016/12/16 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
[14:36]2014 DOTA2国际邀请赛中国区预选赛5.21 Orenda VS NE
2014/05/22 DOTA
Python简单删除列表中相同元素的方法示例
2017/06/12 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
django 控制页面跳转的例子
2019/08/06 Python
用python中的matplotlib绘制方程图像代码
2019/11/21 Python
Pyorch之numpy与torch之间相互转换方式
2019/12/31 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
详解Python 中的容器 collections
2020/08/17 Python
Python接口自动化测试的实现
2020/08/28 Python
计算机应用与科学个人的自我评价
2013/11/15 职场文书
会计出纳岗位职责
2013/12/25 职场文书
廉政教育心得体会
2014/01/01 职场文书
上课说话检讨书大全
2014/01/22 职场文书
剪彩仪式主持词
2014/03/19 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
机械专业求职信
2014/05/25 职场文书
社区戒毒工作方案
2014/06/04 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
浅谈Redis缓冲区机制
2022/06/05 Redis
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL