首页
所有分类
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 相关文章推荐
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
Jul 20 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
Javascript基础知识（一）核心基础语法与事件模型
Sep 29 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
基于javascript实现九九乘法表
Mar 27 Javascript
Angular 路由route实例代码
Jul 12 Javascript
Bootstrap table的使用方法
Nov 02 Javascript
vue小白入门教程
Apr 02 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
Oct 29 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 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
烈阳天道(2) 广播(8) 无线电(12) 怀旧期刊(1) 下载(1) 中学科技(1) 萨拉雷(1) 雄兵连(3) 短波(8) 保养(1)
You might like
浅谈PHP语法(1)
2006/10/09 PHP
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
微信小程序自定义胶囊样式
2020/12/27 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
浅谈python中截取字符函数strip，lstrip，rstrip
2015/07/17 Python
Python+django实现简单的文件上传
2016/08/17 Python
python3 shelve模块的详解
2017/07/08 Python
浅谈使用Python变量时要避免的3个错误
2017/10/30 Python
Python实现合并同一个文件夹下所有txt文件的方法示例
2018/04/26 Python
python numpy 按行归一化的实例
2019/01/21 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
Python编写万花尺图案实例
2021/01/03 Python
django使用多个数据库的方法实例
2021/03/04 Python
Opodo意大利：欧洲市场上领先的在线旅行社
2019/10/24 全球购物
社区七一党员活动方案
2014/01/25 职场文书
一岗双责责任书
2014/04/15 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python