轻量级Jquery简洁精美小巧的下拉框

znds · 发表于 2019-6-26 09:39

本帖最后由 znds 于 2019-6-26 10:47 编辑

基于jquery-1.11.2.min.js的下拉框=========================================
效果如下

引用了style 文件里面再引用 layout.css、base.css两个CSS
当然可以不这么麻烦可以全部写到一起去。
以下是style 文件样式定义==============================================

[CSS] 纯文本查看 复制代码

[url=home.php?mod=space&uid=697496]@charset[/url] "utf-8";
/* CSS Document */
[url=home.php?mod=space&uid=476974]@import[/url] url("layout.css");
@import url("base.css");

/*下拉菜单*/
.single-select {
    position: relative;
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
    *float: left;
}

    .single-select .boxwrap {
        display: inline-block;
        vertical-align: middle;
    }

    .single-select .select-tit {
        position: relative;
        display: block;
        padding: 5px 38px 5px 10px;
        min-width: 40px;
        line-height: 20px;
        height: 20px;
        border: solid 1px #eee;
        text-decoration: none;
        background: #fff;
        white-space: nowrap;
        word-break: break-all;
    }

        .single-select .select-tit span {
            display: inline-block;
            color: #333;
            font-size: 12px;
            vertical-align: middle;
        }

        .single-select .select-tit i {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 28px;
            height: 100%;
            border-left: 1px solid #eee;
            background: url(skin_icons.png) 7px -189px no-repeat #fafafa;
        }

    .single-select .select-items {
        display: none;
        position: absolute;
        left: 0;
        top: 45px; /*overflow:hidden;*/
    }

        .single-select .select-items ul {
            position: relative;
            padding: 5px;
            min-width: 120px;
            max-height: 280px;
            border: 1px solid #eee;
            background: #fff;
            overflow-y: auto;
            overflow-x: hidden;
        }

            .single-select .select-items ul li {
                display: block;
                padding: 4px 10px;
                line-height: 20px;
                font-size: 12px;
                color: #666;
                white-space: nowrap;
                cursor: pointer;
            }

                .single-select .select-items ul li:hover {
                    color: #fff;
                    text-decoration: none;
                    background: #16a0d3;
                }

                .single-select .select-items ul li.selected {
                    color: #fff;
                    background: #16a0d3;
                }

    .single-select .arrow {
        display: none;
        position: absolute;
        left: 15px;
        top: 35px;
        width: 21px;
        height: 11px;
        text-indent: -9999px;
        background: url(skin_icons.png) 0 -290px no-repeat;
    }

    .single-select.up .select-items {
        top: auto;
        bottom: 45px;
    }

    .single-select.up .arrow {
        top: -13px;
        background: url(skin_icons.png) 0 -300px no-repeat;
    }

.page-footer {
    padding: 10px 0;
    height: 32px;
    font-size: 12px;
}

    .page-footer .btn-wrap {
        position: fixed;
        margin: 0;
        padding: 10px 0;
        top: auto;
        left: 15px;
        right: 15px;
        bottom: 0;
        background: #fff;
        z-index: 3;
    }

        .page-footer .btn-wrap:after {
            clear: both;
            content: ".";
            display: block;
            height: 0;
            visibility: hidden;
        }
/* ==========================下拉框样式.结束======================== */

layout.css样式定义====================================================

[CSS] 纯文本查看 复制代码

@charset "utf-8";
/* CSS Document */
/*================管理首页布局.开始===================*/
.main-top{ position:absolute; top:0; right:0; left:180px; height:42px; z-index:11; }
.main-left{ position:absolute; top:0; bottom:0; left:0; width:180px; z-index:10; }
.main-container{ position:absolute; top:43px; right:0; bottom:0; left:180px; overflow:hidden; }
        .main-container iframe{ position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; }
/*================管理首页布局.结束===================*/

base.css样式定义=====================================================

[CSS] 纯文本查看 复制代码

@charset "utf-8";
/* CSS Document */
*{ padding:0; margin:0; font-family:"Microsoft YaHei";font-size:10pt; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
time, mark, audio, video{ margin:0; padding:0; border:0; font-size:100%; text-decoration:none; }
html { line-height:1; }
ol, ul { list-style:none; }

接下来就要绑定下拉框样式。
以上css引用了图标如下：

准备工作完成后开始 js 下拉框样式的绑定事件=====================================

[JavaScript] 纯文本查看 复制代码

//单选下拉框
$.fn.ruleSingleSelect = function () {
    var singleSelect = function (parentObj) {
        parentObj.addClass("single-select"); //添加样式
        parentObj.children().hide(); //隐藏内容
        var divObj = $('<div class="boxwrap"></div>').prependTo(parentObj); //前插入一个DIV
        //创建元素
        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);
        var arrowObj = $('<i class="arrow"></i>').appendTo(divObj);
        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>' + $(this).text() + '</li>').appendTo(itemObj.find("ul")); //创建LI
            if ($(this).prop("selected") == true) {
                liObj.addClass("selected");
                titObj.find("span").text($(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()); //赋值选中值
                arrowObj.hide();
                itemObj.hide(); //隐藏下拉框
                selectObj.trigger("change"); //触发select的onchange事件
            });
        });

        //绑定控件与DIV样式联动
        $(selectObj).change(function () {
            $(this).parent().find('.selected').removeClass('selected');
            var index = $(this).prop('selectedIndex');
            $($(this).parent().find('.boxwrap .select-items ul li')[index]).addClass('selected');
            var text = $(this).find('option:selected').text();
            $(this).parent().find('.select-tit span').text(text);
        })
      
        //检查控件是否启用
        if (selectObj.prop("disabled") == true) {
            titObj.css("cursor", "default");
            return;
        }
        //绑定单击事件
        titObj.click(function (e) {
            debugger
            e.stopPropagation();
            if (itemObj.is(":hidden")) {
                //隐藏其它的下位框菜单
                $(".single-select .select-items").hide();
                $(".single-select .arrow").hide();
                //位于其它无素的上面
                arrowObj.css("z-index", "1");
                itemObj.css("z-index", "1");
                //显示下拉框
                arrowObj.show();
                itemObj.show();
            } else {
                //位于其它无素的上面
                arrowObj.css("z-index", "99");
                itemObj.css("z-index", "99");
                //隐藏下拉框
                arrowObj.hide();
                itemObj.hide();
            }
        });
    };
    return $(this).each(function () {
        singleSelect($(this));
    });
}

上面已经完成了下拉框的绑定事件接下来就是根据 class 来初始化绑定下拉框这样就不需要在各个引用界面重新书写调用绑定事件了。
废话不多说上代码 ==========================================================================

[JavaScript] 纯文本查看 复制代码

$(function(){
$('.rule-single-select').ruleSingleSelect();
})

忘记上Jquery赋值操作了废话不多说直接补上代码如下===================================================

[JavaScript] 纯文本查看 复制代码

$('#主键').val(值).change();//代码赋值操作

免费入口：链接：https://pan.baidu.com/s/1_rTSs3s7v11lxqULARUK6w 提取码：ez4r
复制这段内容后打开百度网盘手机App，操作更方便哦这样一个精美的下拉框就完成了总大小148 KB jquery-1.11.2.min.js 文件占93.6KB

内裤超人 · 发表于 2019-6-26 10:20

为啥我都看不起jq,还是喜欢原生js

znds · 发表于 2019-6-26 10:45

内裤超人发表于 2019-6-26 10:20
为啥我都看不起jq,还是喜欢原生js

那你多分享一点js写的兼容性又高的又漂亮的比较常用的插件出来。让我等菜鸟涨涨见识啊？

内裤超人 · 发表于 2019-6-26 15:27

znds 发表于 2019-6-26 10:45
那你多分享一点js写的兼容性又高的又漂亮的比较常用的插件出来。让我等菜鸟涨涨见识啊？

没什么好分享的，就是单纯喜欢js,不喜欢jq

znds · 发表于 2019-6-26 17:33

内裤超人发表于 2019-6-26 15:27
没什么好分享的，就是单纯喜欢js,不喜欢jq

jq 兼容性好。反正我觉得挺好用的。

内裤超人 · 发表于 2019-6-27 09:12

znds 发表于 2019-6-26 17:33
jq 兼容性好。反正我觉得挺好用的。

我这边公司都是用js,页面加载快

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 轻量级Jquery简洁精美小巧的下拉框

免费评分