Based on jquery expansion beautiful dropdown box can be modified two times _jquery

Continue to send an article about the Web front-end custom control--combobox (dropdown box), I used to use the Drop-down box control always for the style ugly and worry, now share this control, hope that useful colleagues can collect, or make two changes to achieve the desired effect.

To explode the custom Drop-down box:

1. Create the constructor to initialize the value of the assignment control.

2. The bound control is rendered at the foreground.

3. Click the Drop-down box control to display the Drop-down list

4. Click the Trigger Drop-down box control to close the Drop-down list.

5. Click the dropdown item to trigger the event.

The code is as follows:

HTML code:

Copy Code code as follows:

<b class= "Select_type" ></b>

CSS style:

Copy Code code as follows:

. Dropdown span A{float:left;background:url (/img/icon_bg.png);
/* Dropdown box 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;o Verflow: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 Code:

1, custom class:

Copy Code code as follows:

Drop down box
var ComboBox = function () {
This.tag;
This.data_default;
This.data_list;
This.index = 0;

var _this = this;
var _index, _tag, _value;
Class
This.init = function () {
_tag = _this.tag;
_index = _this.index;
Set Object
_this.setdropdown (_this.data_default, _this.data_list);
Assignment Binding Events
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;
}
Set Drop-down list
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 (', '. '): ');
}
}
Drop Down Events
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 ');
}
});
}
Selected events
This.selectedindex = function (index) {
_tag.find (' p a '). Unbind (' click '). Click (function () {
var parent = $ (this). Parent (). parent ();
Assign a value to a drop-down box
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 ();
}
Select event Extension
This.selectedindexexpand = function (tag, index) {}
}

2. Sample code:

Copy Code code as follows:

Http://www.naoqiu.com
var array_state = [{id:-1, Name: ' state '}, {id:1, Name: ' Unsuccessful '}, {id:2, Name: ' Success '}, {id:3, Name: ' failed '}];
State Drop-down Control
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, Sample diagram: