首页 > 代码库 > 自制Jquery下拉框插件

自制Jquery下拉框插件

(function ($) {    $.fn.select3 = function (option) {        var _this = $(this);        var isInit = _this.prev(‘div‘).hasClass(‘select3-parent‘);        if(isInit) return false;        var _default = {            className: ‘select3-parent‘, //下拉框样式可自定义            width: ‘300px‘        };        //默认会根据元素设置的宽度给设置宽度,这里最好设置原始下拉框的宽度        //合并自定义属性        _default = $.extend(_default, option);        var _data_val = _this.children(‘option:checked‘).attr(‘value‘); //默认选中项的值        _data_val = (_data_val ? _data_val : ‘-‘)        var _text = _this.children(‘option:checked‘).text().trim(); //默认选中项的文本        _text = (_text ? _text : ‘-‘);        var _tplWrap = ‘<div class="‘+ _default.className +‘" style="width:‘+ _default.width+‘">‘ +                        ‘<div class="select3-topic" data-val="‘+ _data_val +‘"><span>‘+ _text +                        ‘</span><i></i></div><ul class="select3-ul"  style="width:‘+ _default.width+‘">‘;        _this.children().each(function () {            var _this = $(this);            var _data_val = $(this).attr(‘value‘);            var _text = $(this).text().trim();            if (_this.is(‘optgroup‘)) {                _text = _this.attr(‘label‘);                _data_val = ‘group‘;                _tplWrap += ‘<li data-val="‘+ _data_val +‘" class="select3-group">‘+ _text + ‘<ul>‘;                _this.children().each(function () {                    _text = $(this).text().trim();                    _data_val = $(this).attr(‘value‘);                    _tplWrap += ‘<li data-val="‘+ _data_val +‘">‘+ _text +‘</li>‘;                });                _tplWrap += ‘</ul></li>‘;            }else{                _tplWrap += ‘<li data-val="‘+ _data_val +‘">‘+ _text +‘</li>‘;            }        });        _tplWrap += ‘</ul></div>‘;        _this.addClass(‘hide‘);//隐藏当前控件        _this.before(_tplWrap)//显示插件化后的控件        //绑定下拉事件        $(‘.select3-topic‘).unbind().bind(‘click‘, function () {            $(‘.open‘).not($(this).parent(‘div‘)).removeClass(‘open‘);            $(this).addClass(‘open‘);            $(this).children().addClass(‘open‘);            $(this).parent(‘div‘).toggleClass(‘open‘);        });        //绑定行点击事件        $(‘.select3-ul li[data-val!="group"]‘).unbind().bind(‘click‘, function () {            var _parent = $(this).parents(‘.select3-ul‘);//获取父标签            var _val = $(this).attr(‘data-val‘);            var _text = $(this).text();            _parent.siblings(‘div‘).attr(‘data-val‘, _val);            _parent.siblings(‘div‘).find(‘span‘).text(_text);            _parent.parent(‘div‘).removeClass(‘open‘);//隐藏父标签            _this.val(_val);//设置select值            _this.change();        });        //body click 去除下拉        $(‘body‘).unbind().click(function(e){            var pType = e.target.tagName;            var className = e.target.className;            var reg = new RegExp(‘open‘)            if (pType == ‘I‘ || pType == ‘SPAN‘) {                className = e.target.parentElement.className;            }            if (className == ‘open-dt‘ || pType == ‘DT‘ || reg.test(className)) {                return;            }            $(‘.open‘).removeClass(‘open‘);//select3第2版            $(‘dd‘).slideUp(10, function () {                $(‘.select-has-border‘).removeClass(‘select-has-border-open‘);                $(‘dt[role-page]‘).attr(‘style‘, ‘‘);                $(‘.campaign-query‘).css(‘border-radius‘, ‘5px‘);                $(‘.cp-select ‘).removeClass(‘cp_select_open‘);                $(‘.select-no-border-open‘).attr(‘class‘, ‘select-no-border‘);                $(‘.select-no-border-open‘).children(‘dt‘).attr(‘style‘, ‘‘);            });        });    };})(jQuery);

 

/* select3 容器最外层未点开样式 */.select3-parent{    font-family: arial, Helvetica, sans-serif;    font-size: 12px;    display: inline-block;    border-radius: 5px;    border:1px solid #dfdfdf;    height: 30px;    line-height: 30px;    cursor: pointer;    position: relative;    background-color: #ffffff;    color: #666666;    /* test */    min-width: 60px;}.select3-topic{    height: 30px;    overflow: hidden;    padding-left: 10px;    padding-right: 10px;}.select3-topic i{    float:right;}/* select3 下拉内容 */.select3-ul{    display: none;    position: absolute;    list-style: none;    padding:0;    margin:0;    border:1px solid #dfdfdf;    border-top: none;    border-bottom-left-radius: 5px;    border-bottom-right-radius: 5px;    margin-left:-1px;    background-color: #ffffff;    z-index: 999;    overflow: auto;    max-height: 330px;    box-shadow: 0 6px 12px rgba(0,0,0,0.2);    /* test */    width: 300px;}/* 下拉内容样式 */.select3-ul li{    font-size: 12px;    padding-left: 10px;    padding-right: 10px;}.select3-ul li:hover{    background-color: #111e30;    color: #ffffff;}/* 分组标题样式 select3-group */.select3-ul li.select3-group{    padding-left: 0;    padding-right: 0;    text-indent: 10px;    color: black;}.select3-group{    cursor: default;    font-weight: bold;}.select3-group ul{    font-weight: normal;    color: #666666;    list-style: none;    padding:0;    margin:0;}.select3-group li{    padding-left: 10px;    padding-right: 10px;}li.select3-group:hover{    background-color: #ffffff;    color: black;}.select3-group li:hover{    cursor: pointer;}/* select3 容器最外层点开后样式 */.select3-parent.open{    border-bottom-left-radius: 0px;    border-bottom-right-radius: 0px;    box-shadow: 0 6px 12px rgba(0,0,0,0.2);    border-bottom: none;    border-bottom: 1px solid #fff;}/* 点开后,下拉菜单内容的样式 */.select3-parent.open .select3-ul{    display: block;}.select3-parent.open .select3-topic{    padding:0px;    height: 29px;    margin-left: 10px;    margin-right: 10px;    border-bottom: 1px solid #dfdfdf;}

 

 

技术分享技术分享技术分享

 

自制Jquery下拉框插件