层遇到select框时[收藏]
作者:fason
當層遇到下拉框時總是擋不了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" οnclick="cal_hideElementAll(this)">
點擊讓select隱藏
</div>
<br><br><br><br><br><br>
<input type="button" value="點擊讓select顯示" οnclick="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 οnclick=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 οnmοuseοver="show()" οnmοuseοut="hide()" src="ie.gif"><br><select></select>
<div id=div1 οnmοuseοver="style.visibility=''" οnmοuseοut="style.visibility='hidden'" style="visibility:hidden;">
<div href="http://www.csdn.net" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''" οnclick="window.open(href)">中國程序員</div>
<div href="http://www.sohu.com" οnmοuseοver="style.backgroundColor='highlight'" οnmοuseοut="style.backgroundColor=''" οnclick="window.open(href)">sohu</div>
</div>
</body>
</html>
總結
以上是生活随笔為你收集整理的层遇到select框时[收藏]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mysql存储过程表迁移for_MySQ
- 下一篇： linux 关闭句柄,主库出现大量的未关