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网页制作特殊效果用随机数
May 22 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
Sep 13 Javascript
JQuery判断子iframe何时加载完成解决方案
Aug 20 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
Javascript实现基本运算器
Jul 15 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
js保留两位小数方法总结
Jan 31 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
详解vue身份认证管理和租户管理
May 25 Vue.js
基于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生成zip压缩文件的方法详解
2013/06/09 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
2014/05/11 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
python中 ? : 三元表达式的使用介绍
2013/10/09 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
详解Python3 中hasattr()、getattr()、setattr()、delattr()函数及示例代码数
2018/04/18 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python正则-re的用法详解
2019/07/28 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
使用python制作一个解压缩软件
2019/11/13 Python
python 实现单通道转3通道
2019/12/03 Python
解决Django提交表单报错:CSRF token missing or incorrect的问题
2020/03/13 Python
解决keras GAN训练是loss不发生变化,accuracy一直为0.5的问题
2020/07/02 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
微软香港官网及网上商店:Microsoft HK
2016/09/01 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
Shell如何接收变量输入
2012/09/24 面试题
土木工程专业大学毕业生求职信
2013/10/13 职场文书
大学生关于奋斗的演讲稿
2014/01/09 职场文书
运动会解说词100字
2014/01/31 职场文书
节能减排倡议书
2014/04/15 职场文书
2015年初中生自我评价范文
2015/03/03 职场文书
2015年数学教研组工作总结
2015/05/23 职场文书
新手初学Java网络编程
2021/07/07 Java/Android
mysql insert 存在即不插入语法说明
2022/03/25 MySQL
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL
virtualenv隔离Python环境的问题解析
2022/06/21 Python