<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <TITLE> simulate Combox Co Ntrol-http://www.never-online.net </TITLE> <meta name= "generator" content= "EditPlus" > <meta NAME= " Author "content=" "> <meta name=" Keywords "content=" "> <meta name=" Description "content=" "> <style > body, input {Font-family:verdana; font-size:9pt; } h1 {Font-family:tahoma; font-size:22pt; Text-align:left; Pre {font-size:9pt; Font-family:verdana; border:1px solid #006600; width:400px; padding:10px; Background: #ffffff; Color: #006600; } . Ctlselect {border:1px solid #006600; Font-family:verdana; height:20px; Color: #006600; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected {background: #006600; Color: #ffffff; height:20px; }. unselected {height:20px; Color: #006600; line-height:120%; border-bottom:1px solid #006600; } . CtlSelect1{border:1px solid #003399; Font-family:verdana; height:20px; Color: #003399; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected1 {background: #003399; Color: #ffffff; height:20px; }. unselected1 {height:20px; Color: #003399; line-height:120%; border-bottom:1px solid #003399; } . CtlSelect2 {border:1px solid #990000; Font-family:verdana; height:20px; Color: #990000; Background: #ffffff; /*background:url ({e5066804-650d-4757-9ba4-a92db8817a18}0.jpg); */} selected2 {background: #990000; Color: #ffffff; height:20px; }. unselected2 {height:20px; Color: #990000; line-height:120%; border-bottom:1px solid #990000; } copyright {margin-top:10px; font-size:9pt; Text-align:center; Color: #333; Font-weight:bold; } </style> </HEAD></P> <P><BODY> <script language= "JavaScript" > <!--//------- ------------------------------------------------------//@ module:siMulate Select control, IE only. @ Debug In:ie 6.0//@ Script By:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 APHA/@ E Mail:bluedestiny [at] 126.com//@ website:http://www.never-online.net//@ Please Hold the item please. API//@ class:simulateselect ()///@ Object.style (Ctlstyle[,selstyle][,unselstyle])//Ctlstyle:main cont Rol Combox CSS class name//Selstyle:when mouseover or option Focus CSS class name//Unselstyle:options Blur ' s C SS Class Name///@ object.width= (WIDTHPX)//WIDTHPX must be a digit number. @ object.height= (HEIGHTPX)//HEIGHTPX must be a digit number. @ object.getvalue (ctlselid)//Ctlselid is the unique select control ID///--------------for the next Versi On----------//@ object.readonly = (blnreadonly)//blnreadonly must to be a Boolean type or a number type. @ object.addevent (W, h)//W:fire handler ' s event. H:handler function. //-------------------------------------------------------------</P> <p>function $ (objid) {return document.getElementById (ObjID); }; function Offset (e) {var t = e.offsettop; var L = e.offsetleft; var w = e.offsetwidth; var h = e.offsetheight-2;</p> <P> while (e=e.offsetparent) {t+=e.offsettop; L+=e.offsetleft; return {top:t, left:l, Width:w, height:h}//-----------------------------------------------Functi On Simulateselect () {with [this] {this. IDs = []; THIS.name = this; Property for Beta Version//can editable combox this.readonly = true; This.height = 20; This.width = null; This.ctlstyle = "Ctlselect"; This.selstyle = "selected"; This.unselstyle = "unselected"; This.elementprefix = "e__"; This.inputprefix = "i__"; This.containerprefix = "c__"; This.buttonprefix = "b__"; return this; }}; SimulateSelect.prototype.init = function (Ctlselids) {with (this) {eval (name). append (Ctlselids); Eval (name). simulates (); }};</p&Gt <p>simulateselect.prototype.style = function () {with (this) {Ctlstyle = arguments[0]; Selstyle = arguments[1]; Unselstyle = arguments[2];</p> <P>}}; -----------------------------------------------simulateSelect.prototype.append = function (Ctlselids) {with (this {if (Ctlselids.indexof (",") >0) {var Arrctlsel = Ctlselids.split (","); for (var i=0; i<arrctlsel.length; i++) {eval (name). Ids.push (Arrctlsel[i]); } else {eval (name). Ids.push (Ctlselids); } }}; SimulateSelect.prototype.checkupOnMouseDown = function (e) {with (this) {//Here compatible MF. var el = e? E.srcelement:e.target; if (El.id.indexOf (elementprefix) >-1 | | El.id.indexOf (inputprefix) >-1 | | El.id.indexOf (containerprefix) >-1 | | El.id.indexOf (Buttonprefix) >-1) {return; else {for (Var i=0; i<eval (name). Ids.length; i++) if ($ (containerprefix + ids[i])) $ (Containerprefix + eval (name). Ids[i]). style.display = "None"; }</p> < p>}}; SimulateSelect.prototype.simulates = function () {with (this) {for (var i=0; i<ids.length; i++) eval (name). Simulate (ID S[i]); }}; SimulateSelect.prototype.simulate = function (Ctlselid) {with (this) {var input; var button; var object; var offset;</p> <P> object = $ (ctlselid); Offset = offset (object); input = document.createelement ("input"); button = document.createelement ("button"); Button.setattribute ("id", Buttonprefix + ctlselid); Button.value = "⊿"; Button.value = "6"; button.style.fontFamily = "Webdings, Marlett"; Button.style.background = ""; Button.onclick = Input.onclick = function () {This.blur (); Eval (name). Expand (ctlselid, offset); Input.onselectstart = function () {eval (name). Expand (Ctlselid, offset), Event.returnvalue = false; Input.setattribute ("id", Inputprefix + ctlselid); Input.title = Button.title = "click Expand Options"; Input.style.cursor = Button.style.cursor = "Default"; Input.classname = Button.classname= Ctlstyle; Input.style.width = (width>0 width:object.offsetWidth); Height? Input.style.height=button.style.height=height: ""; Input.value = Object[0].text; if (readonly==true) input.readonly=true;</p> <P>//This is the only IE. Object.insertadjacentelement ("Afterend", button); Object.insertadjacentelement ("afterend", input); Object.style.display = ' None '; }}; SimulateSelect.prototype.expand = function (Ctlselid, offset) {with (this) {var div, btn_off; var object = $ (ctlselid);</p> <P> if (!$ (Containerprefix + ctlselid)) {div = document.createelement ("div" ); Div.style.position = "absolute"; Div.style.display = "block"; Div.setattribute ("id", Containerprefix + ctlselid); Div.classname = Ctlstyle; Div.style.left = Offset.left; Div.style.top = Offset.top + offset.height; Div.style.width = (width width:offset.width) + 20; Div.style.height = Offset.height; Document.body.appendChild (Div);</p> <P> for (Var i=0; i<object.length; i++) {div = document.createelement ("div"); Div.setattribute ("id", div.id = elementprefix + ctlselid + i); Div.style.cursor = "Default";</p> <P> if (object[i].text==$ (Inputprefix + ctlselid). Value) Div.classname = Selstyle; else Div.classname = unselstyle;</p> <P> div.innertext = Div.title = Object[i].text; Div.style.height = height; Div.setattribute ("value", Object[i].value);</p> <P> div.onmouseover = function () {for (Var j=0; j< $ (Containerprefix + ctlselid). Childnodes.length; J + +) {if ($ (containerprefix + ctlselid). Childnodes[j]==this) $ (containerprefix + ctlselid). Childnodes[j].cla Ssname = Selstyle; else $ (containerprefix + ctlselid). Childnodes[j].classname = Unselstyle; } }; Div.onclick = function () {$ (inputprefix + ctlselid). Value = This.innertext; $ (Containerprefix + ctlselid). Style.display = "None"; }; $ (Containerprefix +ctlselid). appendchild (Div); } return; }</p> <P> if ($ (containerprefix + ctlselid). style.display== "None" {for (var i=0; i<object.length; i++) {if (object[i].text==$ (Inputprefix + ctlselid). Value) $ (elementprefix + ctlselid + i). ClassName = Selstyle; else $ (elementprefix + ctlselid + i). ClassName = Unselstyle; $ (Containerprefix + ctlselid). style.display= "Block"; Return }</p> <P> if ($ (containerprefix + ctlselid). style.display== "Block" {$ (Containerprefix + ctlselid). style. Display= "None"; Return } }}; SimulateSelect.prototype.getValue = function (Ctlselid) {with (this) {if ($ (inputprefix + ctlselid)) return $ (inputpref IX + ctlselid). Value; else return null; }}; SimulateSelect.prototype.addEvent = function (W, h) {with (this) {}}; -----------------------------------------------//window.onerror = Function ("return true;"); IE only. Document.attachevent ("onmousedown", function () {A.checkuponmousedown (EVENT); B.checkuponmousedown (event); C.checkuponmousedown (Event)}); --> </SCRIPT> <p> Simulate Combox control </p> <p> demonstrate </p></P> <P><p> <select id= "S0" > <option value= "-Please select your options-" >-Please select your Optio NS-</option> <option value= "1" >option1</option> <option value= "2" >option2</option> <option value= "3" >option3</option> <option value= "4" >option4</option> <option value= "5" >option5</option> </select> </p></P> <P><p> <select id= "S1" > <option Value= "-Please select your options-" >-Please select your options-</option> <option value= "1" >1option1& Lt;/option> <option value= "2" >1option2</option> <option value= "3" >1option3</option> < Option value= "4" >1option4</option> <option value= "5" >1option5</option&Gt </select> </p></P> <P><p> <select id= "s2" > <option value= "-Please select your Options-">-Please select your options-</option> <option value=" 1 ">2option1</option> <option V Alue= "2" >2option2</option> <option value= "3" >2option3</option> <option value= "4" > 2option4</option> <option value= "5" >2option5</option> </select> </p></P> <p ><p> <select id= "S3" > <option value= "-Please select your options-" >-Please select your options-& Lt;/option> <option value= "1" >3option1</option> <option value= "2" >3option2</option> < Option value= "3" >3option3</option> <option value= "4" >3option4</option> <option value= "5" >3option5</option> </select> </p></P> <p><button onclick= "alert (a.getvalue) (' S1 ') + ' n ' b.getvalue ' + (' s2 ') ' class= ' ctlselect ' > Get value </button></p> <p><script language= "JavaScript" > <!--var a = new Simulateselect (); A.style ("Ctlselect", "Selected", "unselected"); A.init ("S1"); var B = new Simulateselect (); B.style ("CtlSelect1", "selected1", "unselected1"); B.width = 300; B.init ("S2"); var c = new Simulateselect (); C.style ("CtlSelect2", "Selected2", "Unselected2"); C.width = 320; C.init ("S3"); --> </SCRIPT></P> <P><p> Description </p> <pre>//----------------------- --------------------------------------//@ module:simulate Select control, IE only. @ Debug In:ie 6.0//@ Script By:bluedestiny, never-online//@ updated:2006-3-22//@ version:1.0 APHA/@ E Mail:bluedestiny [at] 126.com//@ website:http://www.never-online.net//@ Please Hold the item please. API//@ simulateselect (ctlselids)//Ctlselids:select control IDs, split by ","///@ Simulateselect.style (Ctlstyle[,selstyle][,unselstyle])//CtlstyLe:main control Combox CSS class name//Selstyle:when mouseover or option Focus CSS class name//Unselstyle:opt ions Blur ' s CSS class name///@ simulateselect.width= (WIDTHPX)//WIDTHPX must be a digit number. @ simulateselect.height= (HEIGHTPX)//HEIGHTPX must be a digit number. --------------for the next Version----------//@ simulateselect.readonly = (blnreadonly)//Blnreadonly must Be a Boolean type or a number type. @ simulateselect.addevent (W, h)//W:fire handler ' s event. H:handler function. -------------------------------------------------------------</pre></P> <p><div class= " Copyright "> Power by Bluedestiny, Never-online http://www.never-online.net </div> </BODY> </HTML>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
