zoukankan      html  css  js  c++  java
  • 下拉框重写

    $(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

  • 相关阅读:
    IOS-github优秀开源项目大全
    IOS-UISearchBar
    iOS-资源大全
    基于java的https双向认证,android上亦可用
    三重Des对称加密在Android、Ios 和Java 平台的实现
    Python练习—文件
    C语言文件进阶操作
    C语言文件基本操作
    二叉树模板
    单源最短路——Dijkstra算法
  • 原文地址:https://www.cnblogs.com/muwei/p/4977464.html
Copyright © 2011-2022 走看看