Jquery制作--美化下拉框

2023-02-24 13:53: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:;

    padding:;

}

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:;

    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:;

    margin:;

}

.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:;

}

.select-style.focus { z-index:; }

.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:;

    top:;

    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:;

    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   : 美化下拉框

 *  Author ：子纯

 *    Time   ：2016-01-12

 **/

 (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个下面不会出现滚动条）。jq库用1.7+的都没问题。有好的建议可以下面提出，谢谢啦~^_^

码农公寓

相关文章