基于jquery扩展漂亮的下拉框可以二次修改

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

分解自定义下拉框：

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

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

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

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

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

代码如下：

Html代码：
复制代码 代码如下:

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

css样式：
复制代码 代码如下:

.dropdown span a{float:left;background:url(/img/Icon_BG.png);}
/*下拉框 http://power.76741.com*/
.dropdown span a{background-position: -213px -75px;}
.dropdown{float:left;width:105px;}
.dropdown span{border:solid 1px #ccc;width:95%;height:28px;background:url(/img/tbline_bg.png);border-radius:8px;overflow:hidden;}
.dropdown span{float:left;padding-left:10px;line-height:28px; cursor:pointer;}
.dropdown span.active{border-radius:8px 8px 0px 0px;}
.dropdown span font{width:auto;margin-right: 0px;float:left;}
.dropdown span a{float:right;width:20px;height:20px;margin:4px 0;}
.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;}
.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;}
.dropdown p a:hover{background:url(/img/tbline_bg.png);color:#666;}

Js代码：

1、自定义类：
复制代码 代码如下:

//下拉框
var ComboBox = function () {
this.tag;
this.data_default;
this.data_list;
this.index = 0;

var _this = this;
var _index, _tag, _value;
//初始化
this.init = function () {
_tag = _this.tag;
_index = _this.index;
//设置对象
_this.setDropdown(_this.data_default, _this.data_list);
//赋值绑定事件
if (_tag.find(\'span font\').length > 0) _value = _tag.find(\'span font\').attr(\'_id\');
if (_tag == undefined) { return false; }
_this.showEvent();
_this.selectedIndex(_index);
return true;
}
//设置下拉列表
this.setDropdown = function (default_data, list) {
var css = _tag.attr(\'class\');
if (default_data == undefined) {
default_data = { id: \'null\', name: \'\' };
}
var _html = \'\';
if (_tag.find(\'p\').length > 0 && _tag.find(\'span\').length > 0) {
$.each(list, function (i, value) {
_html += \'<a _id=\"\' + value.id + \'\">\' + value.name + \'</a>\';
});
_tag.find(\'span font\').replaceWith(\'<font _id=\"\' + default_data.id + \'\">\' + default_data.name + \'</font>\');
_tag.find(\'p\').html(_html);
} else {
_html = \'<div class=\"dropdown \' + css + \'\">\';
_html += \'<span><font _id=\"\' + default_data.id + \'\">\' + default_data.name + \'</font><a></a></span>\';
_html += \'<p>\';
if (list) {
$.each(list, function (i, value) {
_html += \'<a _id=\"\' + value.id + \'\">\' + value.name + \'</a>\';
});
}
_html += \'</p>\';
_html += \'</div>\';
var parent = _tag.parent();
_tag.replaceWith(_html);
_tag = parent.find(\'.dropdown\' + (css.length > 0 ? \'.\' + css.replace(\' \', \'.\') : \'\'));
}
}
//下拉事件
this.showEvent = function () {
_tag.find(\'span\').unbind(\'click\').click(function () {
var p = $(this).parent().find(\'p\');
if (p.css(\'display\') == \'block\') {
p.css(\'display\', \'none\');
$(this).removeClass(\'active\');
} else if (p.html().length > 0) {
p.css(\'display\', \'block\');
$(this).addClass(\'active\');
}
});
}
//选中事件
this.selectedIndex = function (index) {
_tag.find(\'p a\').unbind(\'click\').click(function () {
var parent = $(this).parent().parent();
//给下拉框赋值
if ($(this).text().length > 0) {
var font = parent.find(\'font\');
font.text($(this).text());
font.attr(\"_id\", $(this).attr(\'_id\'));
_this.selectedIndexExpand(parent, $(this).index());
parent.find(\'span\').removeClass(\'active\');
}
parent.find(\'p\').css(\'display\', \'none\');
});
if (_tag.find(\'p a\').length <= _index) _index = 0;
if (_value && _value != \'\') {
_index = _tag.find(\'p a[_id=\"\' + _value + \'\"]\').index();
}
_tag.find(\'p a:eq(\' + _index + \')\').click();
}
//选中事件扩展
this.selectedIndexExpand = function (tag, index) { }
}

2、示例代码：
复制代码 代码如下:

//http://www.naoqiu.com
var array_state = [{ id: -1, name: \'状态\' }, { id: 1, name: \'未成功\' }, { id: 2, name: \'成功\' }, { id: 3, name: \'失败\'}];
//状态下拉控件
var select_type = new ComboBox();
select_type.tag = $(\'.select_type\');
select_type.data_default = array_state[0];
select_type.data_list = array_state;
select_type.selectedIndexExpand = function (tag, index) {
//fun_Pager();
}
select_type.init();

3、示例图：

本文地址：https://www.stayed.cn/item/1230

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案