I will continue to publish an article about the web Front-end custom control & mdash; ComboBox (drop-down box). I used to use the drop-down box control to make it ugly. Now I want to share this control, hope that useful colleagues can add to favorites or make secondary modifications to achieve the desired effect. Split custom drop-down box: 1. I will continue to post an article about the web Front-end custom control-ComboBox (drop-down box). In the past, I used the drop-down box control to worry about the ugly style. Now I want to share this control, hope that useful colleagues can add to favorites or make secondary modifications to achieve the desired effect. Split custom drop-down box: 1. Create a constructor and initialize the value assignment control. 2. The bound control is displayed on the foreground. 3. Click the drop-down box control to display the drop-down list 4. Click the trigger drop-down box control to collapse the drop-down list. 5. Click the drop-down to trigger the event. The Code is as follows: Html code: [html]
Css style: [css]. dropdown span a {float: left; background: url (/img/Icon_BG.png);}/* drop-down box http://power.76741.com */. Dropdown span a {background-position:-pixel PX-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: 0 p X; 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-alig N: left; width: 100%; overflow: hidden ;}. dropdown p a: hover {background: url (/img/tbline_bg.png); color: #666;} Js Code: 1. Custom class: [javascript] // drop-down box var ComboBox = function () {this. tag; this. data_default; this. data_list; this. index = 0; var _ this = this; var _ index, _ tag, _ value; // initialize this. init = function () {_ tag = _ this. tag; _ index = _ this. index; // set object _ this. setDropdown (_ this. data_default, _ this. data_list); // assign a value to bind the event 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 the 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 + = ''+ value. name + '';}); _ tag. find ('span font '). replaceWith (''+ default_data.name +''); _tag.find('p'hangzhou.html (_ html);} else {_ html = ''; _ html + ='' + default_data.name + ''; _ html + ='
'; If (list) {$. each (list, function (I, value) {_ html + = ''+ value. name + '';});} _ html + ='
'; _ Html + = ''; var parent = _ tag. parent (); _ tag. replaceWith (_ html); _ tag = parent. find ('. dropdown '+ (css. length> 0? '. '+ Css. replace ('','. '): '');} // drop-down event 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') ;}}) ;}// select the event this. selectedIndex = function (index) {_ Tag. find ('P '). unbind ('click '). click (function () {var parent = $ (this ). parent (). parent (); // assign if ($ (this) to the drop-down list ). 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'mirror.css ('display', 'None') ;}); if (_ tag. find ('P '). Length <= _ index) _ index = 0; if (_ value & _ value! = '') {_ Index = _ tag. find ('P a [_ id = "'+ _ value +'"] '). index () ;}_ tag. find ('P a: eq ('+ _ index + ')'). click ();} // select the event extension this. selectedIndexExpand = function (tag, index) {}} 2. Sample Code: [javascript] // http://www.naoqiu.com Var array_state = [{id:-1, name: 'status'}, {id: 1, name: 'unsuccessful '}, {id: 2, name: 'success'}, {id: 3, name: 'failed'}]; // status 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; functions = function (tag, index) {// fun_Pager ();} select_type.init (); 3. example:
