• 下拉框重写


    $(function () {
        $(".select-default").selectOpen();
    });
    $.fn.selectOpen = function () {
        var singleSelect = function (parentObj) {
            parentObj.addClass("single-select"); //添加样式
            parentObj.children().hide(); //隐藏内容
            var sltWidth = parentObj.attr("width"); //定义宽度
            var sltHeight = parentObj.attr("height"); //定义高度
            var divObj = $('<div class="boxwrap focus"></div>').prependTo(parentObj); //前插入一个DIV
            divObj.css("width", sltWidth); //写入宽度
            //创建元素
            var titObj = $('<a class="select-tit" href="javascript:;"><span></span><i></i></a>').appendTo(divObj);
            var itemObj = $('<div class="select-items"><ul></ul></div>').appendTo(divObj);
            itemObj.find("ul").css("width", sltWidth);
            itemObj.find("ul").css("height", sltHeight);
            var selectObj = parentObj.find("select").eq(0); //取得select对象
            //遍历option选项
            selectObj.find("option").each(function (i) {
                var indexNum = selectObj.find("option").index(this); //当前索引
                var liObj = $('<li title="' + $(this).text() + '">' + $(this).text() + '</li>').appendTo(itemObj.find("ul")); //创建LI
                if ($(this).prop("selected") == true) {
                    liObj.addClass("selected");
                    titObj.find("span").text($(this).text()).attr("title", $(this).text());
                }
                //检查控件是否启用
                if ($(this).prop("disabled") == true) {
                    liObj.css("cursor", "default");
                    return;
                }
                //绑定事件
                liObj.click(function () {
                    $(this).siblings().removeClass("selected");
                    $(this).addClass("selected"); //添加选中样式
                    selectObj.find("option").prop("selected", false);
                    selectObj.find("option").eq(indexNum).prop("selected", true); //赋值给对应的option
                    titObj.find("span").text($(this).text()).attr("title", $(this).text()); //赋值选中值
                    itemObj.hide(); //隐藏下拉框
                    selectObj.trigger("change"); //触发select的onchange事件
     
                });
            });
     
            //检查控件是否启用
            if (selectObj.prop("disabled") == true) {
                titObj.css("cursor", "default");
                return;
            }
            //绑定单击事件
            titObj.click(function (e) {
                e.stopPropagation();
                //表单验证提示信息点击之后消失
                $(this).parents(".pst-rela").find(".tips-text").hide();
                if (itemObj.is(":hidden")) {
                    selectObj.trigger("click"); //触发select的click事件
     
                    //隐藏其它的下位框菜单
                    $(".single-select .select-items").hide();
                    //位于其它无素的上面
                    itemObj.css("z-index", "51");
                    //显示下拉框
                    itemObj.show();
                    //加深边框颜色   
                    //divObj.addClass('focus');    
     
                } else {
                    //位于其它无素的上面
                    itemObj.css("z-index", "");
                    selectObj.trigger("blur"); //触发select的onblure事件
                    //隐藏下拉框
                    itemObj.hide();
                    //去除边框颜色
                    //divObj.removeClass('focus');
                }
            });
            //绑定页面点击事件
            $(document).click(function (e) {
                selectObj.trigger("blur"); //触发select的onblure事件
                itemObj.hide(); //隐藏下拉框
                //divObj.removeClass('focus');//去除边框颜色
            });
        };
        return $(this).each(function () {
            singleSelect($(this));
        });
    }
    //下拉框重写结束
    <div class="select-default">
        <select >
            <option value="">这样就可以啦</option>
        </select>
    </div>
    .single-select ol, ul
    {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .single-select
    {
        position: relative;
        display: inline-block;
        font-family: Microsoft YaHei;
        color: #666;
        font-size: 14px;
        text-align: left;
        vertical-align: middle;
        cursor: pointer;
    }
    .single-select .boxwrap
    {
        display: inline-block;
        width: 161px;
        border: solid 1px #d6d6d6;
        vertical-align: middle;
    }
    .single-select .boxwrap.focus, .single-select .boxwrap.focus ul
    {
        border: solid 1px #ed9334;
    }
    .single-select .select-tit
    {
        position: relative;
        display: block;
        padding: 0 36px 0 5px;
        line-height: 26px;
        height: 26px;
        text-decoration: none;
        background: #fff;
        word-break: break-all;
        color: #666;
        overflow: hidden;
    }
    .single-select .select-tit span
    {
        display: inline-block;
        height: 26px;
    }
    .single-select .select-tit i
    {
        position: absolute;
        right: 0;
        top: 0;
        display: inline-block;
        width: 26px;
        height: 26px;
        background: url(../images/sprite.png) -134px -20px no-repeat;
    }
    .boxwrap.focus i{
        background-position:-134px -20px;
    }
    .single-select .select-items
    {
        display: none;
        position: absolute;
        left: 0;
        top: 31px;
    }
    .select-up .select-items
    {
        top:auto;
        bottom:31px;
    }
    .single-select .select-items ul
    {
        position: relative;
        width: 161px;
        max-height: 130px;
        border: 1px solid #d6d6d6;
        background: #fff;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .single-select .select-items ul li
    {
        display: block;
        padding-left: 5px;
        line-height: 26px;
        height: 26px;
        overflow: hidden;
        cursor: pointer;
    }
    .single-select .select-items ul li:hover
    {
        color:#ed9334;
    }
    .single-select .select-items ul li.selected
    {
        background: #ed9334;
        color:#fff;
    }
    .single-select.disabled .boxwrap
    {
        border: 1px solid #d6d6d6;
    }
    .single-select.disabled .select-tit
    {
        color:#b3b3b3;
        cursor:default;
    }
    .single-select.disabled .select-items
    {
        display:none !important;
    }
    /* 下拉框样式结束 */
    CSS

    完整压缩包下载地址:http://pan.baidu.com/s/1bomzDYR

  • 相关阅读:
    Filter的基本配置
    11.3、4(filter的生命周期和API)、
    11.1(过滤器概述)、(创建过滤器filter)
    10.6商品的促销活动,(未解决)
    php 调用常量或者变量的时候千万不能加引号""'' 不然不生效
    thinkphp5 if else的表达式怎么写?
    request() 获取参数是数组不是对象
    thinkphp5 PATHINFO路由正确的访问方式
    thinkphp5 的iframe文件怎么显示到html里面
    thinkphp5引入外部css js文件
  • 原文地址:https://www.cnblogs.com/muwei/p/4977464.html
Copyright © 2020-2023  润新知