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中match函数的用法小结
Feb 08 Javascript
Jquery Ajax解析XML数据(同步及异步调用)简单实例
Feb 12 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
Mar 06 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
koa源码中promise的解读
Nov 13 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 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中foreach结合curl实现多线程的方法分析
2016/09/22 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
JS 自动安装exe程序
2008/11/30 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
js图片轮播手动切换特效
2017/01/12 Javascript
Vue.js学习之计算属性
2017/01/22 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
小程序实现左滑删除功能
2018/10/30 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
浅析Python中signal包的使用
2015/11/13 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
详解Python并发编程之创建多线程的几种方法
2019/08/23 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
html5各种页面切换效果和模态对话框用法总结
2014/12/15 HTML / CSS
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
有个性的自我评价范文
2013/11/15 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
教师产假请假条
2014/04/10 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
springboot集成flyway自动创表的详细配置
2021/06/26 Java/Android