首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于jquery实现下拉框美化特效

Posted in Javascript onFebruary 02, 2016

平常我们用的原生select下拉框，大部分样式没办法修改，导致在不同的浏览器里面会跟设计图的风格大相径庭。所以为了能让它美化起来，就用JQ模拟了一个下拉框，可以随意定义样式。原生的下拉框也保留在div里面隐藏着，方便后台开发人员对其进行操作。

效果图如下：

基于jquery实现下拉框美化特效

HTML代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <title>下拉框美化</title>
 <link href="css/style.css" rel="stylesheet"/>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/simSelect.js"></script>
 <script>
 $(function(){
 //下面是调用初始化语句，class名可通用，也可以ID单独定义
 $(".select-box").simSelect();  //什么参数都不带，默认样式。建议用这个，参数都写在div上面好了，比较直观。

 $(".slt-box01").simSelect({  //所有参数如下：
  maxNum: 4,      //最大下拉个数(超过则显示滚动条)，默认为5 
  width: 250,      //下拉框盒子宽度，默认为200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
  direction: "down",    //下拉方向，默认down，另一个是up
  disabled: false     //是否禁用，默认不禁，禁的话是true
 });

 $(".slt-box02").simSelect({  //举例：这里写参数，div上面也写参数的情况。结果是：会以div上面的为准
  maxNum: 4,      
  width: 250,      
  direction: "down"
 });

 $(".slt-box03").simSelect({  //禁用下拉框的话，有三种写法，任选。建议第二种：
  disabled: true,     //一：这里的参数写disabled:true 二：给div加class="disabled" 三：给原生select加disabled="true"
  width: 250      
 });

 $("#slt-box04").simSelect();  //ID单独定义。单个option可以禁用
 });
</script>
</head>
<body>
 <!-- wrap和table非必需,用于布局而已 --> 
 <div class="wrap">
 <table width="600">
  <tbody>
  <tr>
   <th>不带参数：</th>
   <td><div class="select-box">
   <select>
    <option>第一个选项</option>
    <option>第二个选项</option>
    <option>第三个选项</option>
    <option>第四个选项</option>
    <option>第五个选项</option>
    <option>第六个选项</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>初始化语句写了参数：</th>
   <td><div class="slt-box01">
   <select>
    <option>第一个选项</option>
    <option>第二个选项</option>
    <option>第三个选项</option>
    <option>第四个选项</option>
    <option>第五个选项</option>
    <option>第六个选项</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>在div上面写参数：</th>
   <td><div class="slt-box02 up" max-num="6" width="300">
   <select>
    <option>第一个选项</option>
    <option>第二个选项</option>
    <option>第三个选项</option>
    <option>第四个选项</option>
    <option>第五个选项</option>
    <option>第六个选项</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>禁用的样式：</th>
   <td><div class="slt-box03">
   <select>
    <option>第一个选项</option>
    <option>第二个选项</option>
    <option>第三个选项</option>
    <option>第四个选项</option>
    <option>第五个选项</option>
    <option>第六个选项</option>
   </select>
   </div></td>
  </tr>
  <tr>
   <th>其中一个选项禁用：</th>
   <td><div id="slt-box04" class="up" max-num="4" width="200">
   <select>
    <option>第一个选项</option>
    <option>第二个选项超长超长超长超长长啊</option>
    <option disabled="true">第三个选项</option>
    <option>第四个选项</option>
    <option>第五个选项</option>
    <option>第六个选项</option>
   </select>
   </div></td>
  </tr>
  </tbody>
 </table>
 </div>
</body>
</html>

CSS样式如下：

@charset "utf-8";
/* 简单reset */
body, ul, li {
 margin: 0;
 padding: 0;
}
body {
 font: 14px/24px Microsoft YaHei;
 color: #333;
}
ul { list-style: none; }
a {
 color: #333;
 outline: none;
 text-decoration: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
 text-align: left;
}
/* 布局样式，非必须 */
.wrap {
 width: 600px;
 margin: 100px auto 0;
 padding: 20px;
 background-color: #d3f3dd;
}
.wrap table th, .wrap table td { padding: 8px 2px; }
.wrap table th {
 font-weight: normal;
 text-align: right;
}
/* 下拉框样式 必须 */
.select-style ul {
 list-style: none;
 padding: 0;
 margin: 0;
}
.select-style select { display: none; }
.select-style {
 position: relative;
 display: inline-block;
 font-family: Microsoft YaHei;
 color: #666;
 font-size: 14px;
 text-align: left;
 vertical-align: middle;
 z-index: 50;
}
.select-style.focus { z-index: 51; }
.select-style .slt-wrap {
 display: inline-block;
 width: 200px;
 border: solid 1px #d6d6d6;
 vertical-align: middle;
}
.select-style.focus .slt-wrap { border: solid 1px #53a8df; }
.select-style .slt-title {
 position: relative;
 display: block;
 padding: 0 36px 0 5px;
 line-height: 30px;
 height: 30px;
 text-decoration: none;
 background-color: #fff;
 word-break: break-all;
 color: #666;
 overflow: hidden;
}
.select-style .slt-title .slt-text {
 display: inline-block;
 height: 30px;
 *cursor: pointer;
}
.select-style .slt-title i {
 position: absolute;
 right: 0;
 top: 0;
 display: inline-block;
 width: 30px;
 height: 30px;
 background: url(../images/ico-select.png) 0 0 no-repeat;
 *cursor: pointer;
}
.select-style.focus .slt-title i { background-position: 0 -30px; }
.select-style.disabled .slt-title i { 
 background-position: 0 -60px;
 *cursor: default; 
}
.select-style .opn-box {
 display: none;
 position: absolute;
 left: 0;
 top: 31px;
 width: 100%;
}
.select-style.up .opn-box {
 top: auto;
 bottom: 31px;
}
.select-style .opn-box .opn-list {
 position: relative;
 _width: 100%;
 max-height: 130px;
 border: 1px solid #d6d6d6;
 background: #fff;
 overflow-y: auto;
 overflow-x: hidden;
}
.select-style.focus .opn-box .opn-list { border-color: #53a8df; }
.select-style .opn-box .opn-list li {
 display: block;
 _width: 100%;
 padding-left: 5px;
 line-height: 26px;
 height: 26px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 cursor: pointer;
}
.select-style .opn-box .opn-list .selected { background: #d4edfe; }
.select-style .opn-box .opn-list li:hover {
 color: #fff;
 background: #65abda;
}
.select-style .opn-box .opn-list li.disabled {
 color: #cacaca;
 background: #f0f0f0;
 cursor: default;
}
.select-style.disabled .slt-wrap { border: 1px solid #d6d6d6; }
.select-style.disabled .slt-title {
 color: #cacaca;
 background-color: #f0f0f0;
 cursor: default;
}
.select-style.disabled .slt-title .slt-text { *cursor: default; }
/* 下拉框样式 结束 */

Jquery代码如下：

/** 
 * Name : 美化下拉框 
 **/
 (function(jQuery){
  $.fn.simSelect = function (o) {
  o = $.extend({         //设置默认参数 
   maxNum: 5,         //最大显示5个
   width: 200,         //默认宽200px。为避免过多的设置宽度，尽量依照项目中最常见的宽度设定css样式。
   direction: "down",       //向下拉，另一个是up 
   disabled: false        //不可用时为true
  },o || {});
  return this.each(function(){     //构造开始
   if($(this).children(".slt-wrap")){   //去重复 
    $(this).children(".slt-wrap").remove();
   };
   var $ts = $(this),
    $select = $ts.find("select").eq(0),
    wid = parseFloat($ts.attr("width")),
    num = parseFloat($ts.attr("max-num")),
    $sltWrap = $("<div class='slt-wrap'></div>").prependTo($ts),
    $sltTit = $("<a class='slt-title' hidefocus='true' href='javascript:void(0);'><span class='slt-text'></span><i></i></a>").prependTo($sltWrap),
    $sltText = $(".slt-text", $sltTit),
    $opnBox = $("<div class='opn-box'><ul class='opn-list'></ul></div>").appendTo($sltWrap),
    $opnList = $(".opn-list", $opnBox);
   $ts.addClass("select-style");        //增加一个class专门作为写css样式用
   $select.find("option").each(function(i){     //循环生成li标签 
    var text = $(this).text(),
     $li = $("<li title='"+text+"'>"+text+"</li>").appendTo($opnList);
    if(this.selected){
     $li.addClass("selected");
     $sltText.text(text).attr("title",text); 
    };
    if(this.disabled){
     $li.addClass("disabled");
     return;
    };
   });
   var $li = $("li",$opnList),
    hei = $li.height();
   if(wid){             //设置宽度
    $ts.css("width",wid+"px");       //兼容IE6、7
    $sltWrap.css("width",wid-2+"px");        
   }else{
    $ts.css("width",o.width+"px");      //兼容IE6、7
    $sltWrap.css("width",o.width-2+"px");
   }; 
   if(num){             //设置高度
    $opnList.css("max-height", hei*num+"px");
   }
   else{
    $opnList.css("max-height", hei*o.maxNum+"px");
   };
   if(o.direction == "up"){         //设置上、下拉方向
    $ts.addClass("up");
   };
   $li.on("click",function(){         //li标签的点击事件，传给原生select
    var index = $opnList.find("li").index(this),
     text = $(this).text();
    if($(this).hasClass("disabled")){
     return false;
    };
    $(this).addClass("selected").siblings().removeClass("selected");
    $select.find("option").prop("selected",false).eq(index).prop("selected",true);
    $sltText.text(text).attr("title",text);
    $opnBox.hide();
    $ts.removeClass("focus");
   });
   $sltTit.on("click",function(e){        //a标签的点击下拉事件
    e.stopPropagation();         //阻止a标签的点击冒泡  
    if($opnBox.is(":hidden")){
     $(".select-style .opn-box").hide();     
     $(".select-style").removeClass("focus");
     $opnBox.show();
     $ts.addClass("focus");
    }
    else{
     $opnBox.hide();
     $ts.removeClass("focus");
    }
   });
   $select.on("change",function(){        //原生select的点击事件，传给ul
    var index = $(this).find("option:selected").index(),
     text = $li.eq(index).text();
    $li.eq(index).addClass("selected").siblings().removeClass("selected");
    $sltText.text(text).attr("title",text);
   });
   $(document).on("click",function(e){       //点击其他地方收起下拉框
    if($opnBox.is(":visible")){
     $opnBox.hide();
     $ts.removeClass("focus");
    } 
   });
   if($select.prop("disabled") == true || o.disabled == true || $ts.hasClass("disabled")){
    $sltTit.off("click");         //设置禁用状态
    $select.prop("disabled",true);
    $ts.addClass("disabled");
   };
  });
 };
})(jQuery);

兼容到IE7+（IE6其实也行，只是选项多于5个下面不会出现滚动条）。

如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助。

基于jquery实现下拉框美化特效

- Author -

子纯不语

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 学习点滴记录
Apr 24 Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 Javascript
XMLHTTPRequest的属性和方法简介
Nov 23 Javascript
原生JS实现加入收藏夹的代码
Oct 24 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
AngularJS自动表单验证
Feb 01 #Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 #Javascript
AngularJS手动表单验证
Feb 01 #Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 #Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 #Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
Feb 01 #Javascript
理解javascript中的严格模式
Feb 01 #Javascript
黑名单(1) NFS(1) 批处理(1) SeaTunnel(1) Logrotate(1) ftpserver(1) Odoo(1) 重复数据(2) tkFileDialog(1) T-SQL(1)
You might like
第七节 类的静态成员 [7]
2006/10/09 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
10 个经典PHP函数
2013/10/17 PHP
ThinkPHP CURD方法之table方法详解
2014/06/18 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
vue实现简易计算器功能
2021/01/20 Vue.js
[02:49]DOTA2完美大师赛首日观众采访
2017/11/23 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
python中MySQLdb模块用法实例
2014/11/10 Python
Python实现从百度API获取天气的方法
2015/03/11 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
浅析python redis的连接及相关操作
2019/11/07 Python
基于python调用psutil模块过程解析
2019/12/20 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
2013/01/09 HTML / CSS
委托证明模板
2014/09/16 职场文书
试用期转正员工自我评价
2014/09/18 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
铣工实训报告
2014/11/05 职场文书
教师节主持词开场白
2015/05/29 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
【TED出品】天梯非主流开心游1700 划水骑士
2022/03/31 魔兽争霸