最近迷茫於javascript的閉包與繼承，寫一個小東西找找感覺。
JS+CSS類比Select下拉框，選擇表單效果
網頁中使用Select文法實現的下拉框是很普遍的，但是您有沒有見過使用JS+CSS類比的Select下拉框？並且可以選擇表單哦，儘管代碼複雜了點，但是對於我們瞭解此類特效非常有協助。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>DIV+CSS+JS仿下拉表單</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> </head> <body> <form> <input onclick="hide('HMF-1')" type="text" value="請選擇" id="am" class="am" /> <div id="HMF-1" class="bm"> <span id="a1" onclick="pick('測試一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">測試一</span> <span id="a2" onclick="pick('測試二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">測試二</span> <span id="a3" onclick="pick('測試三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">測試三</span> <span id="a4" onclick="pick('測試四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">測試四</span> <span id="a5" onclick="pick('測試五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">測試五</span> <span id="a6" onclick="pick('測試六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">測試六</span> </div> </form> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這個作品在沒有任何需求下完成，不保證能應用於實際應用，僅用於自娛自樂。
<style type="text/css"><!-- *{padding:0; margin:0;} ul{list-style:none; margin:10px 30px; position:relative; font-family:"宋體";} 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; font-size: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> <h2>瀏覽器預設樣式</h2> <p> <select ><option>select1</option><option>select2</option><option>select3</option><option>select4</option></select></p> <h2>js類比select,樣式主要參照IE8與Firefox。</h2> <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>在不改變HTML結構的前提下，可更改其它樣式。建議用IE8與FF瀏覽，可與預設樣式進行對比。</p> <script type="text/javascript">// <![CDATA[ function beginSelect(elem){ if(elem.className == "btn"){ elem.className = "btn btnhover" elem.onmouseup = function(){ 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 全選 注:如需引入外部Js需重新整理才能執行]
用js類比實現表單select選擇的功能
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>用js類比實現表單select選擇的功能</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(); } } function dropFadeIn(){//選單淡入的效果 if(currentID.filters.alpha.opacity<100){ currentID.filters.alpha.opacity+=20; fadeTimer=setTimeout("dropFadeIn()",50); }else{ dropShow=true; clearTimeout(fadeTimer); } } function dropFadeOut(){//選單淡出的效果 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){//高亮度顯示指標位置 if(dropShow){ for(i=0;i<el.parentElement.childNodes.length;i++){ el.parentElement.childNodes(i).className="select_record0"; } el.className="select_record1"; } } function CheckMe(el){//替換顯示內容 //預留 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){//替換顯示內容 document.getElementById("text1").innerText=el.innerText; sortname=el.innerText; } function CheckMe2(el){//替換顯示內容 document.getElementById("text2").innerText=el.innerText; age=el.innerText; } function CheckMe3(el){//替換顯示內容 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=="請輸入你要找的資訊！"){keywords="";} location.href="userlist.php?sortname="+sortname+"&age="+age+"&addr="+addr+"&keywords="+keywords; } /* s_search end */ </script> </head> <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">選擇類別</label></nobr> </div> <div class="select_value" id="value1" > <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別1</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別2</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe1(this)">類別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">年齡</label></nobr> </div> <div class="select_value" id="value2" > <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">18-25歲</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe2(this)">26-32歲</div> </div> </div> </div> <div class="t_s_item"> <div class="select_box" onselectstart="return false" > <div onclick="dropdown('value3')" > <nobr><label id="text3">所在地</label></nobr> </div> <div class="select_value" id="value3" > <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">上海</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">浙江</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">福建</div> <div class="select_record0" onMouseOver="hiLight(this)" onClick="CheckMe3(this)">廣東</div> </div> </div> </div> <div class="t_s_item" ><input name="keywords" id="keywords" value="請輸入你要找的資訊！" type="text" onfocus="javascript:this.value='';" /></div> <div class="t_s_item" ></div> </form> </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
在不改變HTML結構的前提下，可更改其它樣式。建議用IE8與FF瀏覽，可與預設樣式進行對比。
發布一來是為了記錄自己學習過程，二來想請朋友指點一下迷津，哪些地方欠妥或者有更好的思路可以給我指點一下，謝謝。
