Recently confused with JavaScript closures and inheritance, write a small thing to find the feeling.
js+css Simulate Select Drop-down box, select form Effect
A Drop-down box that is implemented using the SELECT syntax in a Web page is common, but have you ever seen a select Drop-down box that uses the JS+CSS simulation? And you can choose a form. Well, the code is a little bit complicated, but it's very helpful for us to understand this kind of effect.
<! DOCTYPE html> <ptml xmlns= "http://www.w3.org/1999/xhtml" > <pead> <meta http-equiv= "Content-type" Content= "text/html; charset=gb2312 "/> <title>div+css+js copy dropdown form </title> <script type=" Text/javascript "> function $ $ $ (_SID) {return document.getElementById (_SID); function Hide (_sid) {$$$$$ (_sid). style.display = $$$$$ (_sid). Style.display = "None"? ' ': ' None ';} function pick (v) {document.getElementById (' am '). Value=v; Hide (' HMF-1 ')} function bgcolor (ID) {document.getElementById (id). style.background= "#F7FFFA"; document.getElementById (ID). style.color= "#000"; function Nocolor (ID) {document.getElementById (id). style.background= ""; document.getElementById (ID). style.color= "#788F72"; } </script> <style type= "Text/css" > * {margin:0px; padding:0px; Body {font-family:arial, Helvetica, Sans-serif; font-size:12px; }. cur {cursor:pointer; Display:block; Color: #788F72; width:71px; height:22px; Line-height:22px; padding:0px 0px 0px 2px; }. Am {border:0px; Color: #788F72; Cursor:pointer; Background:url (/uploads/allimg/1111/icon_111.jpg) No-repeat Center Center; border:1px #ccc Solid; Display:block; Cursor:pointer; width:73px; height:19px; margin:10px 0px 0px 10px; padding:3px 0px 0px 2px; BM {border:1px #999999 solid; width:73px; margin-left:10px; } </style> </pead> <body> <form> <input onclick= "Hide (' HMF-1 ')" type= "text" value= "Please select" ID = "AM" class= "AM"/> <div id= "HMF-1" class= "BM" > <span id= "A1" onclick= "Pick" (' Test One ') "onmouseover=" bgcolor (' a 1 ') "onmouseout=" Nocolor (' A1 ') "class=" cur "> Test one </span> <span id=" A2 "onclick=" pick (' Test II ') "onmouseover=" BgColor (' A2 ') "Onmouseout=" Nocolor (' A2 ') "class=" cur "> Test two </span> <span id=" A3 "onclick=" pick (' Test three ') " Onmouseover= "bgcolor (' A3 ')" onmouseout= "Nocolor (' A3 ')" class= "cur" > Test three </span> <span id= "A4" onclick= " Pick (' Test IV ') "onmouseover=" BGCOlor (' A4 ') "onmouseout=" Nocolor (' A4 ') "class=" cur "> Test four </span> <span id=" A5 "onclick=" pick (' Test V ') " Onmouseover= "bgcolor" (' A5 ') "onmouseout=" Nocolor (' A5 ') "class=" cur "> Test five </span> <span id=" A6 "onclick=" Pick (' Test VI ') "onmouseover=" bgcolor (' A6 ') "onmouseout=" Nocolor (' A6 ') "class=" cur "> Test six </span> </div> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
This work is done without any requirement and is not guaranteed to apply to practical applications, only for enjoyment.
<style type= "Text/css" ><!--*{padding:0; margin:0; Ul{list-style:none margin:10px 30px; position:relative font-family: "XXFarEastFont-Arial";} UL li{position:relative; width:202px;height:22px;} text{width:200px height:20px; position:absolute; left:0; top:0;border:1px solid #ccc; line-height:20px : 14px; Cursor:default;} Btn{position:absolute;width:17px height:20px; right:1px; top:1px; display:inline-block; Background:url (http:// files.jb51.net/demoimg/201008/btn_thumb_1.jpg) No-repeat;} . Btnhover{background:url (Http://files.jb51.net/demoimg/201008/btn2_thumb.jpg); . select{border:1px solid #666; width:199px Height:auto; position:absolute; top:21px; Display:none;background: #fff;} . select p{line-height:16px; font-size:13px; cursor:default; position:relative;} . Select. Hover{background: #3399FD;} --></style> <p> Browser Default style </p> <p> <select ><option>select1</option> <option>select2</option><option>select3</option><option>select4</option></select></p> <H2>JS Simulation Select, style main reference IE8 and Firefox. </p> <ul> <li><input type= "text" class= "text" onclick= "Beginselect (this);"/><span class= "BTN" onmousedown= "Beginselect (This)" > </span></li> <li class= "select" > <p>select1 </p> <p>select2</p> <p>select3</p> <p>select4</p> </li> </ul> <p> You can change other styles without changing the HTML structure. It is recommended that you use IE8 and FF to compare to the default style. </p> <script type= "Text/javascript" >//<! [cdata[function Beginselect (elem) {if (Elem.classname = = "Btn") {elem.classname = "btn btnhover" Elem.onmouseup = Func tion () {this.classname = "btn"}} var ul = Elem.parentNode.parentNode; var li = ul.getelementsbytagname ("Li"); var selectarea = li[li.length-1]; if (SelectArea.style.display = = "Block") {SelectArea.style.display = "none"; } else{selectArea.style.display = "block"; MOUSEOVERBG (SelectarEA); } function Mouseoverbg (elem1) {var input = elem1.parentNode.getElementsByTagName ("input") [0]; var p = elem1.getelementsbytagname ("P"); var plength = p.length; for (var i = 0; i < plength i++) {p[i].onmouseover = SHOWBG; P[i].onmouseout = SHOWBG; P[i].onclick = PostText; function Showbg () {this.classname = = "Hover"? this.classname = "": This.classname = "hover"; function PostText () {var selected = this.innerhtml; Input.setattribute ("value", selected); Elem1.style.display = "None"; }//]]></script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
using JS simulation to realize the function of form select selection
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title> use JS simulation to implement form select Select function </title> <style type=" Text/css ">. t_search {width : 900px; Margin:auto;} . t_s_item {width:100px; float:left;} /* S_select start/select_box {cursor:default; text-align:left;} . select_value {border:1px solid; Filter:alpha (opacity:0); visibility:hidden; overflow-x:hidden; overflow:auto; Position:absolute;} . select_record0 {padding-left:4px background: #fff; width:100%; color: #000; height:20px; line-height:20px;} . select_record1 {padding-left:4px background: #ccc; width:100%; color: #000; height:20px; line-height:20px;} /* S_select End */</style> <script type= "Text/javascript" >/* s_search start */var sortname; var age; var addr; var keywords; VAR dropshow=false; var CurrentID; Function dropdown (EL) {if (dropshow) {dropfadeout (); }else{Currentid=document.getelementbyid (EL); currentid.style.visibility= "visible"; Dropfadein (); The effect of the function Dropfadein () {//Menu fade in if (currentid.filters.alpha.opacity<100) {currentid.filters.alpha.opacity+=20 ; Fadetimer=settimeout ("Dropfadein ()", 50); }else{dropshow=true; Cleartimeout (Fadetimer); The effect of the function dropfadeout () {//Menu fades out if (currentid.filters.alpha.opacity>0) {cleartimeout (Fadetimer); currentid.filters.alpha.opacity-=20; Fadetimer=settimeout ("Dropfadeout ()", 50); }else{Dropshow=false; Currentid.style.visibility= "hidden"; }} function Dropdownhide () {if (dropshow) {dropfadeout (); Dropshow=false; } function Hilight (EL) {//high-brightness display indicator position if (dropshow) {for (i=0;i<el.parentelement.childnodes.length;i++) {El.parentel Ement.childnodes (i) classname= "select_record0"; } el.classname= "Select_record1"; } function Checkme (EL) {//Replace display content//reserve Var Temptxt; Temptxt=el.innertext; if (El.innerText.indexOf ("┝") >= 0) {temptxt=el.innertext.replace ("┝", "");} document.getElementById ("text"). Innertext=temptxt.substring (0,temptxt.indexof ("|")); Tempstr=temptxt.substring (Temptxt.indexof ("|") +1); function CheckMe1 (EL) {//Replace display content document.getElementById ("Text1"). Innertext=el.innertext; Sortname=el.innertext; function CheckMe2 (EL) {//Replace display content document.getElementById ("Text2"). Innertext=el.innertext; Age=el.innertext; function CheckMe3 (EL) {//Replace display content document.getElementById ("Text3"). Innertext=el.innertext; Addr=el.innertext; } document.onclick=dropdownhide; function Go_search () {Keywords=document.getelementbyid ("Form_search"). Keywords.value; if (!sortname) {sortname= "";} if (!age) {age= "";} if (!addr) {addr= "";} if (keywords==) Please enter the information you are looking for! ") {keywords=" ";} location.href= "Userlist.php?sortname=" +sortname+ "&age=" +age+ "&addr=" +addr+ "&keywords=" +keywords; }/* S_search end */</script> </pead> <body> <dIV class= "T_search" > <form id= "form_search" name= "Form_search" action= "userlist.php" method= "get" > <div class= "T_s_item" > <div class= "Select_box" onselectstart= "return false" > <div onclick= "dropdown (' value1 ') "> <nobr><label id=" Text1 "> select category </label></nobr> </div> <div class=" Select_value " Id= "value1" > <div class= "select_record0" onmouseover= "hilight (This)" onclick= "CheckMe1 (This)" > Category 1</div > <div class= "select_record0" onmouseover= "hilight (This)" onclick= "CheckMe1 (This)" > Category 2</div> <div class= "select_record0" onmouseover= "hilight (This)" onclick= "CheckMe1 (This)" > Category 3</div> </div> </ div> </div> <div class= "T_s_item" > <div class= "Select_box" onselectstart= "return false" > <div onclick= "dropdown (' value2 ')" > <nobr><label id= "Text2" > Age </label></nobr> </div> <div class= "Select_value" id= "value2" > <divclass= "select_record0" onmouseover= "hilight (This)" onclick= "CheckMe2 (This)" >18-25 old </div> <div class= " Select_record0 "onmouseover=" hilight (This) "onclick=" CheckMe2 (This) ">26-32 years old </div> </div> </div > </div> <div class= "T_s_item" > <div class= "select_box" onselectstart= ' return False ' > <div on click= "dropdown (' Value3 ')" > <nobr><label id= "text3" > Location </label></nobr> </div> <div class= "Select_value" id= "Value3" > <div class= "select_record0" onmouseover= "Hilight" (This) "onclick=" CheckMe3 (This) "> Shanghai </div> <div class=" select_record0 "onmouseover=" hilight (This) "Onclick=" CheckMe3 ( This) "> Zhejiang </div> <div class=" select_record0 "onmouseover=" hilight (This) "onclick=" CheckMe3 (This) "> Fujian </div> <div class= "select_record0" onmouseover= "hilight (This)" onclick= "CheckMe3 (This)" > Guangdong </div> </div> </div> </div> <div class= "T_s_item" ><iNput name= "keywords" id= "keywords" Please enter the information you are looking for! "Type=" text "onfocus=" javascript:this.value= "/></div> <div class=" T_s_item "></div> </ form> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
You can change other styles without changing the HTML structure. It is recommended that you use IE8 and FF to compare to the default style.
Published to record their own learning process, and then want to ask a friend to guide the maze, which places defective or have better ideas can give me advice, thank you.
