使用window.createPopup();做的簡單下拉菜單

accesine 2005-08-24

展開全文

使用層做下拉菜單或者漂浮圖片的話，最大的問題就是會被輸入框等擋住，更別說框架，所以現(xiàn)在比較流行用window.createPopup();的說,它可以在頁面所有元素之上，不存在被誰遮擋的問題。

下面是剛寫的一個簡單的下拉菜單。代碼很簡單，很容易看懂，所以修改也方便。

<script language="JavaScript" type="text/JavaScript">
//首先定義兩個數(shù)組，一個是菜單文字，一個是鏈接
var MenuText = new Array(3);
    var MenuEven = new Array(3);
    MenuText[1] = ["菜單11","菜單12","菜單13"];
    MenuText[2] = ["菜單21","菜單21"];
    MenuText[3] = ["菜單31","菜單321","菜單33"];

    MenuEven[1] = ["url11","url12","url13"];
    MenuEven[2] = ["url21","url22"];
    MenuEven[3] = ["url31","url32","url33"];

//初始化一個oPopup對象

var oPopup = window.createPopup();

//這兩個是獲得表格絕對位置的方法，很有用的說
function getLeftIE(x,m) {
var dx=0;
if (x.tagName=="TD"){
    dx=x.offsetLeft;
}
else if (x.tagName=="TABLE") {
    dx=x.offsetLeft;
    if (m) { dx+=(x.cellPadding!=""?parseInt(x.cellPadding):2); m=false; }
}
return dx+(x.parentElement.tagName=="BODY"?0:getLeftIE(x.parentElement,m));
}
function getTopIE(x,m) {
var dy=0;
if (x.tagName=="TR"){
    dy=x.offsetTop;
}
else if (x.tagName=="TABLE") {
    dy=x.offsetTop;
    if (m) { dy+=(x.cellPadding!=""?parseInt(x.cellPadding):2); m=false; }
}
return dy+(x.parentElement.tagName=="BODY"?0:getTopIE(x.parentElement,m));
}

//顯示菜單
function ButtonClick(node,t)
{
   //首先得到鼠標所在的表格的位置
    var left = getLeftIE(node,true)-8;
    var top = getTopIE(node,true);
//定義打開的oPopup的寬度，高度
    var width = 90;
    var height = MenuText[t].length*20;
//清空oPopup的內(nèi)容，否則每次調(diào)用都只會在后面接著寫
    oPopup.document.body.innerHTML = "";
    var oPopBody = oPopup.document.body;
    oPopup.show(left,top, width, height, document.body);
        oPopup.document.open;
//讓oPopup在鼠標離開時自動隱藏。
        oPopup.document.write("<body leftmargin=0 topmargin=0 scroll=no style=‘border : 0 px;‘ onmouseover=clearTimeout(parent.popt); onmouseout=parent.popt=setTimeout(‘parent.oPopup.hide()‘,10);>");

//用document.write()寫菜單內(nèi)容
        oPopup.document.write("<table width=100% height=100% style=‘border-collapse : collapse;‘>");
    for(var i=0;i<MenuText[t].length;i++)
        {
        oPopup.document.write("<tr><td background=‘image/topbg.gif‘ bgcolor=#cccccc style=‘border-top : #cccccc 1px solid;border-bottom : #666666 1px solid;border-left : #cccccc 1px solid;border-right : #666666 1px solid;mouse : hand; font-size : 12px; color:#000000;text-align : left;vertical-align : center;CURSOR: hand‘ onmouseover=this.bgColor=‘#C2D2E5‘; onmouseout=this.bgColor=‘#cccccc‘; height=‘20‘ onclick=‘parent.parent.main.location.href=\""+MenuEven[t][i]+"\"‘;>"+MenuText[t][i]+"</td></tr>");
        }
        oPopup.document.write("</table></td></tr></table>");
        oPopup.document.write("</body>")
}

</SCRIPT>

主要方法就這么多，由于我使用了框架，所以菜單代碼中鏈接打開位置是下面的框架“main"。用下面的語句調(diào)用菜單顯示方法ButtonClick()

              <td align="left" onMouseOver="ButtonClick(this,1)">菜單1</td>

在此點擊鼠標，菜單就會在此格的上面出現(xiàn)。菜單內(nèi)容是上面那個數(shù)組    MenuText[1] = ["菜單11","菜單12","菜單13"];在其他地方顯示其他菜單時只要修改數(shù)組和調(diào)用時的數(shù)字就行了。