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 相关文章推荐
不错的JS中变量相关的细节分析
Aug 13 Javascript
jQuery ui 1.7更新小结
Aug 15 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
js中最容易被忽视的事件问题大总结
May 15 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
Apr 30 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
ztree+ajax实现文件树下载功能
May 18 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
php5 pdo新改动加载注意事项
2008/09/11 PHP
利用PHP扩展vld查看PHP opcode操作步骤
2013/03/04 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
巧妙破除网页右键禁用的十大绝招
2006/08/12 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
jQuery实现textarea自动增长宽高的方法
2015/12/18 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
React实现轮播效果
2020/08/25 Javascript
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
python实现转盘效果 python实现轮盘抽奖游戏
2019/01/22 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
python中time.ctime()实例用法
2021/02/03 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
瀑布模型都有哪些优缺点
2014/06/23 面试题
运动会通讯稿100字
2014/01/31 职场文书
企业元宵节主持词
2014/03/25 职场文书
供应链金融服务方案
2014/05/25 职场文书
超市开业庆典活动策划方案
2014/09/15 职场文书
大学生实习证明范本
2014/09/19 职场文书
学校师德师风整改方案
2014/10/28 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
整理Python中常用的conda命令操作
2021/06/15 Python
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js