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

2024-10-27 15:13:00

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

效果图如下：

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的select下拉框选择触发事件实例分析

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1
jQuery实现鼠标经过购物车出现下拉框代码(推荐)

这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html:  <div class="shopping" id="shopping-box"> <a href="" id="shoptext"><i class="i
jQGrid动态填充select下拉框的选项值(动态填充)

本文给大家分享一段代码关于技巧jqgrid动态填充select 下拉框的选项值,非常不多说了,直接给大家贴代码了,具体代码如下所示: function gettypes(){ //动态生成select内容 var str=""; $.ajax({ type:"post", async:false, url:"checkpersontype", success:function(data){ if (data != null) { var json
jQuery实现下拉框左右移动（全部移动，已选移动）

用到的方法为:appendTo() 格式:$(content).appendTo(selector) appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容. click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数. 看一下具体实现的代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script
利用jquery获取select下拉框的值

jquery不是特别熟练,每次使用不常用的就要百度,特地记录下来. 我的下拉框是: <div class="form-group"> <select class="form-control" id="iv_level"> <option value="">店员</option> <option value="">店长</option>
利用jquery实现下拉框的禁用与启用

话不多说,附上实例代码,仅供大家参考禁用下拉框 //下拉框禁用 $("select").each(function () { $("#" + this.id).attr("disabled", true); }); 启用下拉框 //下拉框启用 $("select").each(function () { $("#" + this.id).removeAttr("disabled");
jQuery Select下拉框操作小结(推荐)

jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var checkValue=$("#select_
jQuery实现下拉框多选 jquery-multiselect 的实例代码

先给大家展示下效果图: 除了jquery,需要引用的样式和js文件: <link rel="stylesheet" type="text/css" href="../assets/jquery.multiselect.css" /> <link rel="stylesheet" type="text/css" href="../assets/style.css" /&g
js和jquery分别验证单选框、复选框、下拉框

本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen
jQuery插件实现可输入和自动匹配的下拉框

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑

例如"报告交付方式"包含固定交付时,第二个下拉框不可编辑,反之可以编辑,具体代码如下报告交付方式: <select class="easyui-combobox" panelHeight="auto" style="width:195px" data-options="required:true,valueField:'id',textField:'text' , onSelect:function(){ v
jquery仿QQ登录账号选择下拉框效果

QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示
jQuery+PHP+MySQL实现无限级联下拉框效果

本文简单实现jQuery无限级联效果,分享给大家供大家参考,具体内容如下效果图: 图1 仅下拉框图2 层级提示+下拉框图3 存储数据点击响应主要包含3个文件:index.html(主页),wuxianjilian.php(数据处理),wuxianjilian.sql(MySQL数据文件) 1. index.html <html> <head> <title>无限级联</title> <meta http-equiv="Content

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

相关推荐

随机推荐