基于jquery扩展漂亮的下拉框——ComboBox

Posted 2020-07-30

关于web前端自定义控件——ComboBox(下拉框),以往我在使用下拉框控件老是为了样式丑陋而烦恼，现在分享这个控件，希望有用的同仁们可以收藏，或进行二次修改，达到你想要的效果。

分解自定义下拉框：

1。创建构造函数，初始化赋值控件值。

2。绑定控件呈现在前台。

3。点击下拉框控件，展示下拉列表

4。点击触发下拉框控件，收起下拉列表。

5。点击下拉项触发事件。

代码如下：

html代码：

 

1 <b class="select_type"></b>

css样式：

 1 .dropdown span a{float:left;background:url(/img/Icon_BG.png);}
 2 /*下拉框 http://power.76741.com*/
 3 .dropdown span a{background-position: -213px -75px;}
 4 .dropdown{float:left;width:105px;}
 5 .dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url(/img/tbline_bg.png);border-radius:8px;overflow:hidden;}
 6 .dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;}
 7 .dropdown span.active{border-radius:8px 8px 0px 0px;}
 8 .dropdown span font{width:auto;margin-right: 0px;float:left;}
 9 .dropdown span a{float:right;width:20px;height:20px;margin:4px 0;}
10 .dropdown p{border:solid 1px #ccc;border-top:0px;width:103px;display:none;position:absolute;margin-top:28px;background-color:#fff;z-index:3;max-height:280px;overflow-y: auto; overflow-x: hidden;}
11 .dropdown p a{float:left;line-height:28px;height:28px;padding-left:10px;color:#666;font-size:14px;cursor:default;text-align:left;width:100%;overflow:hidden;}
12 .dropdown p a:hover{background:url(/img/tbline_bg.png);color:#666;} 

Js代码：

1。自定义类：

 1 //下拉框
 2 var ComboBox = function () {
 3     this.tag;
 4     this.data_default;
 5     this.data_list;
 6     this.index = 0;
 7 
 8     var _this = this;
 9     var _index, _tag, _value;
10     //初始化
11     this.init = function () {
12         _tag = _this.tag;
13         _index = _this.index;
14         //设置对象
15         _this.setDropdown(_this.data_default, _this.data_list);
16         //赋值绑定事件
17         if (_tag.find(‘span font‘).length > 0) _value = _tag.find(‘span font‘).attr(‘_id‘);
18         if (_tag == undefined) { return false; }
19         _this.showEvent();
20         _this.selectedIndex(_index);
21         return true;
22     }
23     //设置下拉列表
24     this.setDropdown = function (default_data, list) {
25         var css = _tag.attr(‘class‘);
26         if (default_data == undefined) {
27             default_data = { id: ‘null‘, name: ‘‘ };
28         }
29         var _html = ‘‘;
30         if (_tag.find(‘p‘).length > 0 && _tag.find(‘span‘).length > 0) {
31             $.each(list, function (i, value) {
32                 _html += ‘<a _id="‘ + value.id + ‘">‘ + value.name + ‘</a>‘;
33             });
34             _tag.find(‘span font‘).replaceWith(‘<font _id="‘ + default_data.id + ‘">‘ + default_data.name + ‘</font>‘);
35             _tag.find(‘p‘).html(_html);
36         } else {
37             _html = ‘<div class="dropdown ‘ + css + ‘">‘;
38             _html += ‘<span><font _id="‘ + default_data.id + ‘">‘ + default_data.name + ‘</font><a></a></span>‘;
39             _html += ‘<p>‘;
40             if (list) {
41                 $.each(list, function (i, value) {
42                     _html += ‘<a _id="‘ + value.id + ‘">‘ + value.name + ‘</a>‘;
43                 });
44             }
45             _html += ‘</p>‘;
46             _html += ‘</div>‘;
47             var parent = _tag.parent();
48             _tag.replaceWith(_html);
49             _tag = parent.find(‘.dropdown‘ + (css.length > 0 ? ‘.‘ + css.replace(‘ ‘, ‘.‘) : ‘‘));
50         }
51     }
52     //下拉事件
53     this.showEvent = function () {
54         _tag.find(‘span‘).unbind(‘click‘).click(function () {
55             var p = $(this).parent().find(‘p‘);
56             if (p.css(‘display‘) == ‘block‘) {
57                 p.css(‘display‘, ‘none‘);
58                 $(this).removeClass(‘active‘);
59             } else if (p.html().length > 0) {
60                 p.css(‘display‘, ‘block‘);
61                 $(this).addClass(‘active‘);
62             }
63         });
64     }
65     //选中事件
66     this.selectedIndex = function (index) {
67         _tag.find(‘p a‘).unbind(‘click‘).click(function () {
68             var parent = $(this).parent().parent();
69             //给下拉框赋值
70             if ($(this).text().length > 0) {
71                 var font = parent.find(‘font‘);
72                 font.text($(this).text());
73                 font.attr("_id", $(this).attr(‘_id‘));
74                 _this.selectedIndexExpand(parent, $(this).index());
75                 parent.find(‘span‘).removeClass(‘active‘);
76             }
77             parent.find(‘p‘).css(‘display‘, ‘none‘);
78         });
79         if (_tag.find(‘p a‘).length <= _index) _index = 0;
80         if (_value && _value != ‘‘) {
81             _index = _tag.find(‘p a[_id="‘ + _value + ‘"]‘).index();
82         }
83         _tag.find(‘p a:eq(‘ + _index + ‘)‘).click();
84     }
85     //选中事件扩展
86     this.selectedIndexExpand = function (tag, index) { }
87 }

2。示例代码：

 1        var array_state = [{ id: -1, name: ‘状态‘ }, { id: 1, name: ‘未成功‘ }, { id: 2, name: ‘成功‘ }, { id: 3, name: ‘失败‘}];
 2        //状态下拉控件
 3         var select_type = new ComboBox();
 4         select_type.tag = $(‘.select_type‘);
 5         select_type.data_default = array_state[0];
 6         select_type.data_list = array_state;
 7         select_type.selectedIndexExpand = function (tag, index) {
 8             //fun_Pager();
 9         }
10         select_type.init();

3.示例图：

4.下载地址：http://www.tiaoceng.com/assemblydetail_5.html