位置：首页>> 网络编程>> JavaScript>> 模拟下拉菜单[兼容IE系列以及火狐]

模拟下拉菜单[兼容IE系列以及火狐]

　来源：飘雨之夜　发布时间：2009-12-13 10:23:00　

标签：下拉菜单,ie,火狐

兼容主流浏览器，独立样式表，可以很方便的进行视觉效果自定义

截图：

模拟下拉菜单演示代码：

<!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>测试模拟下拉菜单 - aspxhome.com</title><script type="text/javascript">// JavaScript Document by www.pyzy.netvar pyzy={/*总JS对象*/};pyzy.$ = function(id){return document.getElementById(id);}; //根据ID取得某对象的方法pyzy.$T = function(fctTagName,fctParentObj){ //根据TagName取得某对象的方法 if(fctParentObj==null)fctParentObj=document; return fctParentObj.getElementsByTagName(fctTagName);};pyzy.c$ = function(fctInObj,fctTagName,fctObjId,fctStyle){ if(fctInObj==null){ alert("要用来插入["+fctTagName+"#"+fctObjId+"]的容器对象不存在！\n\n请检查创建功能是否写在了容器加载之前。"); return true; }else{ var newObj = document.createElement(fctTagName); newObj.id=fctObjId; newObj.style.cssText=fctStyle; fctInObj.appendChild(newObj); try{return newObj;} finally{newObj = null;} }};//取得对象的绝对位置以及宽高pyzy.getPosition = function(obj){ var top=0; var left=0; var width=obj.offsetWidth; var height=obj.offsetHeight; while(obj.offsetParent){ top+=obj.offsetTop; left+=obj.offsetLeft; obj=obj.offsetParent; } return{"top":top,"left":left,"width":width,"height":height};};/**********************************///模拟下拉开始document.write('<style type="text/css"></style>');pyzy.SelectSel = function(fctI,fctP){ var theSelobj=varSelObjs[fctI],varTheAs=pyzy.$T("a",pyzy.$("divOptions"+fctI)); varTheAs[varSelObjs[fctI].selectedIndex].className=""; varTheAs[fctP].className="Sel"; theSelobj.value=theSelobj.options[fctP].value; pyzy.$("divSelInfo"+fctI).innerHTML=theSelobj.options[fctP].text+""; pyzy.$("divOptions"+fctI).style.display="none";};var varSelObjs=null,theShowOpsId=0;pyzy.ShowOptions = function(fctI){ theShowOpsId=fctI;pyzy.$("divOptions"+fctI).style.display="block";}pyzy.SelectRep = function(){ if(varSelObjs!=null)return; var varSelObjsPos=null,theDivSelobj=null,theDivOpts=[],varOnChange=null; varSelObjs=pyzy.$T("select",document.body); for(var i=0;i<varSelObjs.length;i++){ if(varSelObjs[i].getAttributeNode("pyzyRep")){ varSelObjsPos=pyzy.getPosition(varSelObjs[i]); theDivSelobj=pyzy.c$(document.body,"div","divSelect"+i,"width:"+varSelObjsPos.width+"px;");/*z-index:"+(1+i)+";top:"+varSelObjsPos.top+"px;left:"+varSelObjsPos.left+"px; 167px*/ theDivSelobj.className="DivSelect"; varOnChange=""; if(varSelObjs[i].getAttributeNode("onchange")){ if(varSelObjs[i].getAttributeNode("onchange").value){ varOnChange=varSelObjs[i].getAttributeNode("onchange").value.replace(/\'/g,"\"").replace(/\bthis\b/g,"varSelObjs["+i+"]"); } } theDivOpts=[]; for(var p=0;p<varSelObjs[i].options.length;p++)theDivOpts[p]="<a onclick='pyzy.SelectSel("+i+","+p+");"+varOnChange+"'"+(varSelObjs[i].selectedIndex==p?" class='Sel'":"")+" style='width:"+(varSelObjsPos.width-27)+"px;' href='javascript:void(0);'>"+varSelObjs[i].options[p].text+"</a>"; theDivSelobj.innerHTML=" <div id='divSelInfo"+i+"' class='SelText' onclick='pyzy.ShowOptions("+i+");' style='width:"+(varSelObjsPos.width-27)+"px;'>"+(varSelObjs[i].selectedIndex!=-1?varSelObjs[i].options[varSelObjs[i].selectedIndex].text:" ")+"</div> <div id='divOptions"+i+"' style='z-index:"+(999+i)+";display:none;width:"+(varSelObjsPos.width-(varSelObjs[i].options.length>25?5:20))+"px;"+(varSelObjs[i].options.length>10?"height:153px;overflow-y:auto;":"")+"' class='DivOptions'>"+theDivOpts.join("")+"</div> "; varSelObjs[i].parentNode.insertBefore(theDivSelobj,varSelObjs[i].nextSibling); varSelObjs[i].style.display="none"; } }};if(window.addEventListener){ window.addEventListener("load",function(){pyzy.SelectRep();}, false); document.addEventListener("mouseup",function(){if(pyzy.$("divOptions"+theShowOpsId))pyzy.$("divOptions"+theShowOpsId).style.display="none";}, false);}else{ window.attachEvent("onload",function(){pyzy.SelectRep();}); document.attachEvent("onmouseup",function(){if(pyzy.$("divOptions"+theShowOpsId))pyzy.$("divOptions"+theShowOpsId).style.display="none";});}</script></head><body style="line-height:30px;font-size:12px;"><h1>模拟下拉菜单效果演示：</h1>用到的图片：<img src="https://img.aspxhome.com/file/UploadPic/200912/13/new_select_imgs_byhuzj-22.gif"><br><br>以下为演示效果，只需要在需要转化的SELECT上增加 “pyzyRep”属性。<div>0.这个是普通的：<br><select name="test1" id="test1"> <option value="test1.option1">这个是普通的</option> <option value="test1.option2">test1.option2</option> <option value="test1.option3">test1.option3</option> <option value="test1.option4">test1.option4</option></select></div><div>1.这个是模拟的(不带onchange)：<br><select name="test2" id="test2" pyzyRep> <option value="test1.option1">test1.option1</option> <option value="test1.option2">test1.option2</option> <option value="test1.option3">test1.option3</option> <option value="test1.option4">test1.option4</option></select></div><div>2.这个是模拟的(带onchange进行测试)：<br><select name="test3" id="test3" onchange="alert('执行了onchange');" pyzyRep> <option value="test1.option1">test1.option1</option> <option value="test1.option2">test1.option2</option> <option value="test1.option3">test1.option3</option> <option value="test1.option4">test1.option4</option></select></div><div>3.这个是模拟的(带onchange,并取当前选择的值)：<br><select name="test4" id="test4" onchange="alert(this.value);" pyzyRep> <option value="test1.option1">test1.option1</option> <option value="test1.option2">test1.option2</option> <option value="test1.option3">test1.option3</option> <option value="test1.option4">test1.option4</option></select></div></body></html>

投稿

模拟下拉菜单[兼容IE系列以及火狐]

猜你喜欢