WEB开发网
开发学院网页设计JavaScript JS版常见问题(一)层遇到select框时? 阅读

JS版常见问题(一)层遇到select框时?

 2007-11-27 16:35:19 来源:WEB开发网   
核心提示:当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.1.最直接的方法:隐藏下拉框.下面提供的是一个比较通用的一组函数:test.htm<script>var HideElem

当层遇到下拉框时总是挡不了select框?其实这是IE的BUG,其它的浏览器没有这个问题,对于这个问题论坛里不少提出,在这里提供我的几种方法,各有各的好处,有错,有好的意见者提出,谢谢.

1.最直接的方法:隐藏下拉框.

下面提供的是一个比较通用的一组函数:

test.htm

------------

<script>
var HideElementTemp = new Array();
//点击菜单时,调用此的函数,菜单对象
function cal_hideElementAll(obj){
     cal_HideElement(IMG,obj);
     cal_HideElement(SELECT,obj);
     cal_HideElement(OBJECT,obj);
     cal_HideElement(IFRAME,obj);
}
function cal_HideElement(strElementTagName,obj){
try{
   var showDivElement = obj;
   var calendarDiv = obj;
   var intDivLeft = cal_GetOffsetLeft(showDivElement);
   var intDivTop = cal_GetOffsetTop(showDivElement);//+showDivElement.offsetHeight;
   //HideElementTemp=new Array()
   for(i=0;i<window.document.all.tags(strElementTagName).length; i++){
 var objTemp = window.document.all.tags(strElementTagName)[i];
 if(!objTemp||!objTemp.offsetParent)
   continue;
 var intObjLeft=cal_GetOffsetLeft(objTemp);
 var intObjTop=cal_GetOffsetTop(objTemp);
 if(((intObjLeft+objTemp.clientWidth)>intDivLeft)&&
   (intObjLeft<intDivLeft+calendarDiv.style.posWidth)&&
   (intObjTop+objTemp.clientHeight>intDivTop)&&
   (intObjTop<intDivTop+calendarDiv.style.posHeight)){
   //var intTempIndex=HideElementTemp.length;//已经有的长度
 //save elementTagName is stutas
   //HideElementTemp[intTempIndex]=new Array(objTemp,objTemp.style.visibility);
   HideElementTemp[HideElementTemp.length]=objTemp
   objTemp.style.visibility=hidden;
     }
   }
}catch(e){alert(e.message)
}
}

function cal_ShowElement(){
   var i;
   for(i=0;i<HideElementTemp.length; i++){
 var objTemp = HideElementTemp[i]
 if(!objTemp||!objTemp.offsetParent)
   continue;
 objTemp.style.visibility=
   }
   HideElementTemp=new Array();
}
function cal_GetOffsetLeft(src){
   var set=0;
   if(src && src.name!=divMain){
     if (src.offsetParent){
       set+=src.offsetLeft+cal_GetOffsetLeft(src.offsetParent);
 }
 if(src.tagName.toUpperCase()!=BODY){
   var x=parseInt(src.scrollLeft,10);
   if(!isNaN(x))
       set-=x;
 }
   }
   return set;
}

function cal_GetOffsetTop(src){
   var set=0;
   if(src && src.name!=divMain){
     if (src.offsetParent){
       set+=src.offsetTop+cal_GetOffsetTop(src.offsetParent);
   }
 if(src.tagName.toUpperCase()!=BODY){
   var y=parseInt(src.scrollTop,10);
   if(!isNaN(y))
 set-=y;
 }
   }
   return set;
}

</script>
<select></select>
<select></select>
<div style=position:absolute;left:0;top:0;width:100;height:100;background-color:red onclick=cal_hideElementAll(this)>
点击让select隐藏
</div>
<br><br><br><br><br><br>
<input type=button value=点击让select显示 onclick=cal_ShowElement()>

以上这种方法,如果对于select框数目少,相对固定的话,直接用obj.style.visibility=hidden这样进行隐藏是更直接的.

2.Object对象的优先度较高,可以挡住select框

<OBJECT id=aa style=display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200; type=text/x-scriptlet data=about:<body><div style=position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black>test</div>></OBJECT>
<select><option>hellohellohellohello</select><button onclick=aa.style.display=aa.style.display==none?:none>test</button>

这种方法虽然也简单,但对复杂的层是来说还不是好的解决方法

3.用iframe作载体

以下是一简单的例子:

-----------

<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>简单菜单</title>
<!--
提供定位函数,用iframe作载体,不会被select挡住
By Fason(2003-5-21)
-->
<style id=s>
#div1{
position:absolute;
z-index:100;
width:100;
height:130;
background-color:#d2e8ff;
border:1 solid black;
}
div{cursor:hand;font-size:12px;}
a{text-decoration:none;color:red;font-size:12px}
</style>
</head>
<body>
<script>
function window.onload(){
var shtml=div1.innerHTML;
var ifm=document.createElement(<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>)
ifm.style.width=div1.offsetWidth
ifm.style.height=div1.offsetHeight
ifm.name=ifm.uniqueID
div1.innerHTML=
div1.appendChild(ifm)
window.frames[ifm.name].document.write(s.outerHTML+<body leftmargin=0 topmargin=0>+shtml+</body>)
}

function show(){
with(document.all.img1){
x=offsetLeft;
y=offsetTop;
objParent=offsetParent;
while(objParent.tagName.toUpperCase()!= BODY){
x+=objParent.offsetLeft;
y+=objParent.offsetTop;
objParent = objParent.offsetParent;
}
y+=offsetHeight-1
}
with(document.all.div1.style){
pixelLeft=x
pixelTop=y
visibility=
}
}
function hide(){
document.all.div1.style.visibility=hidden
}
</script>
<img id=img1 onmouseover=show() onmouseout=hide() src=http://www.chinageren.com/chengxu/Javascript/ie.gif><br><select></select>
<div id=div1 onmouseover=style.visibility= onmouseout=style.visibility=hidden style=visibility:hidden;>
<div href=http://www.csdn.net onmouseover=style.backgroundColor=highlight onmouseout=style.backgroundColor= onclick=window.open(href)>中国程序员</div>
<div href=http://www.sohu.com onmouseover=style.backgroundColor=highlight onmouseout=style.backgroundColor= onclick=window.open(href)>sohu</div>
</div>
</body>
</html>

以下是我用iframe作载体写的一个可编辑下拉框,效果请看:有错请纠正

http://fason.nease.net/code/form/select/combox/combox.htm

Tags:JS 常见问题 遇到

编辑录入:coldstar [复制链接] [打 印]
赞助商链接