繼續發一篇關於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.示例圖：
以下為示例教程：
ComboBox()
Contents
- ComboBox()
html代碼
<head>
<title><／title>
<link href="/_css/common.css" rel="stylesheet" type="text/css" ／>
<script src="/_js/jquery-1.8.2.min.js" type="text/javascript"><／script>
<script src="/_js/Valid.js" type="text/javascript"><／script>
<script src="download.js" type="text/javascript"><／script>
<／head>
<body>
<b class="com_table"><／b>
<／body>
init()
初始化控件，加載列表框。
示例:
$(document).ready(function () {
var grade = [{ id: 0, name: "默認值" }, { id: 1, name: "第二個" }, { id: 2, name: "第三個"}];
var combobox = new ComboBox();
combobox.tag = $('.com_table');
combobox.data_default = grade[0];
combobox.data_list = grade;
combobox.init();
})
var grade = [{ id: 0, name: "默認值" }, { id: 1, name: "第二個" }, { id: 2, name: "第三個"}];
var combobox = new ComboBox();
combobox.tag = $('.com_table');
combobox.data_default = grade[0];
combobox.data_list = grade;
combobox.init();
})
展示效果:
selectedIndexExpand(tag,index)
選中拓展事件，選中記錄后執行的操作。
參數:
- tag:下拉框對象
- index:選擇的索引值
示例:
$(document).ready(function () {
var grade = [{ id: 0, name: "默認值" }, { id: 1, name: "第二個" }, { id: 2, name: "第三個"}];
var combobox = new ComboBox();
combobox.tag = $('.com_table');
combobox.data_default = grade[0];
combobox.data_list = grade;
//選擇拓展事件
combobox.selectedIndexExpand = function (tag, index) {
alert("您選擇了第" + index + "個");
}
combobox.init();
})
var grade = [{ id: 0, name: "默認值" }, { id: 1, name: "第二個" }, { id: 2, name: "第三個"}];
var combobox = new ComboBox();
combobox.tag = $('.com_table');
combobox.data_default = grade[0];
combobox.data_list = grade;
//選擇拓展事件
combobox.selectedIndexExpand = function (tag, index) {
alert("您選擇了第" + index + "個");
}
combobox.init();
})
展示效果:
下載地址：