javascript+xml實現二級下拉菜單二

2019-11-18 12:49:01

字體：大中小

來源：轉載

供稿：網友

三、典型的xml配置
　　
　　<?xml version="1.0" encoding="GB2312"?>
　　
　　<popmenu>
　　
　　<style>
　　
　　<main-menu>
　　
　　<base>
　　<background-color>#DDDDDD</background-color>
　　<background-image>url(menu_bg.jpg)</background-image>
　　<font-size>10pt</font-size>
　　<color>#000099</color>
　　<width>100%</width>
　　<height>32</height>
　　<text-align>center</text-align>
　　<cursor>default</cursor>
　　</base>
　　
　　<menu-item>
　　
　　<base>
　　<background-color></background-color>
　　<color>#000099</color>
　　</base>
　　
　　<mouse-over>
　　<background-color>white</background-color>
　　<border>1 solid #6699CC</border>
　　<color>green</color>
　　</mouse-over>
　　
　　<split-image>url(menu_split.gif)</split-image>
　　</menu-item>
　　</main-menu>
　　
　　
　　<sub-menu>
　　
　　<base>
　　<font-size>9pt</font-size>
　　<border>1 solid black</border>
　　<cursor>default</cursor>
　　</base>
　　
　　<menu-item>
　　
　　<base>
　　<background-color>white</background-color>
　　<color>#006699</color>
　　</base>
　　
　　<mouse-over>
　　<background-color>#DDDDDD</background-color>
　　<color>#000066</color>
　　</mouse-over>
　　
　　<split-line>1 solid #999999</split-line>
　　</menu-item>
　　</sub-menu>
　　</style>
　　
　　
　　<context>
　　<path></path>
　　</context>
　　
　　
　　<menus>
　　<menu text="CSDN" href="#" target="_blank" width="60">
　　<menu text="網站首頁" target="_blank">
　　</menu>
　　<menu text="服務" href="#">
　　<menu text="blog" ></menu>
　　<menu text="技術社區" ></menu>
　　<menu text="幫助" href="javascript:help();"></menu>
　　</menu>
　　</menu>
　　<menu text="SOHU" target="_blank" width="60">
　　</menu>
　　<menu text="NCUCEC" target="_blank" width="60">
　　<menu text="公司網站" target="_blank"></menu>
　　<menu text="內部論壇" target="_self"></menu>
　　</menu>
　　</menus>
　　</popmenu>
　　
　　四、使用例子
　　
　　<Html>
　　<head>
　　<title>javascript+xml二級下拉菜單(使用window.createPopup())</title>
　　
　　</head>
　　<body bgcolor="#cccccc">
　　
　　<script language="javascript" src="menu_script1.js"></script>
　　<script language="javascript" src="menu_script2.js"></script>
　　
　　<div>
　　<script language="javascript">loadMenu("menu_data.xml");</script>
　　</div>
　　
　　</body>
　　</html>
　　
　　只要節點名稱符合各自標簽(table,tr,td之一)的style attribute即可。
　　
　?。?）主菜單項之間可以設置分割圖片，
　　子菜單項可以設置分割線的樣式。
　　
　?。?）所有圖片都由CSS控制，避免路徑問題。
　　
　?。?）可以設置虛擬目錄的別名，為菜單鏈接使用絕對路徑帶來方便，如：
　　
　　<context>
　　<path>hdsa</path>
　　</context>
　　
　　設置該值后，用戶只需根據文件的目錄結構寫好菜單，而不必擔心虛擬目錄的問題。
　　
　　由于菜單使用了window.createPopup()，所以它被限制在IE5.5以上，而且子菜單假如是新開窗口，會被攔截。
　　
　　注：用window.createPopup()制作菜單受到過前人的啟發
　　
　　設置該值后，用戶只需根據文件的目錄結構寫好菜單，而不必擔心虛擬目錄的問題。
　　
　　由于菜單使用了window.createPopup()，所以它被限制在IE5.5以上，而且子菜單假如是新開窗口，會被攔截。
　　
　　注：用window.createPopup()制作菜單受到過前人的啟發
　　=====================================================================
　　
　　二、實現的兩個腳本可以寫在一個文件中：
　　
　?。?）處理Popup窗口的腳本
　　
　　//------------------ 下面一些函數用來處理彈出窗口　------------------ //
　　var pops = new Array(); // 用來存儲Popup窗口家族的數組
　　function CreatePopup(degree)
　　{
　　if (degree < 0)　　// 層數不能小于0
　　return null;
　　if (pops[degree] != null) //假如已經存在則不需創建
　　return pops[degree];
　　
　　if (degree == 0)
　　pops[0] = window.createPopup(); //創建最頂層Popup窗口
　　else{
　　if (pops[degree - 1] == null)
　　pops[degree - 1] = CreatePopup(degree - 1)　　//遞歸回溯從第一層開始創建
　　pops[degree] = pops[degree - 1].document.parentWindow.createPopup(); //從父Popup窗口創建子Popup窗口
　　}
　　pops[degree].document.body.setAttribute("degree", degree);
　　return pops[degree];
　　}
　　
　　CreatePopup(1); //創建一個2層的Popup家族
　　
　　var oPopup = pops[0];
　　var timer = null;
　　
　　/**
　　*顯示一級子菜單
　　*@param objShow - 顯示子菜單的對象
　　*@param strGetID - 存儲顯示內容的標簽id
　　*/
　　function showSubMenu1(objShow,strGetID) {
　　clearTimer();
　　endHideSubMenu();
　　var objGet = eval(document.getElementById(strGetID));
　　
　　pops[1].hide();
　　pops[0].document.body.innerHTML = objGet.innerHTML;
　　pops[0].show(0,0,1,1,objShow);
　　var intWidth = pops[0].document.body.scrollWidth;
　　var intHeight = pops[0].document.body.scrollHeight;
　　pops[0].hide();
　　pops[0].show(10,objShow.offsetHeight-2,intWidth,intHeight,objShow);
　　}
　　
　　/**
　　*顯示二級菜單
　　*@param strGetID - 存儲顯示內容的標簽id
　　*@param objTr - 顯示子菜單的tr對象
　　*/
　　function showSubMenu2(strGetID,objTr) {
　　clearTimer();
　　endHideSubMenu();
　　var objGet = eval(document.getElementById(strGetID));
　　pops[1].document.body.innerHTML = objGet.innerHTML;
　　pops[1].show(0,0,1,1,pops[0].document.body);
　　var intWidth = pops[1].document.body.scrollWidth;
　　var intHeight = pops[1].document.body.scrollHeight;
　　pops[1].hide();
　　pops[1].show(objTr.offsetWidth - 2,-2, intWidth, intHeight, objTr);
　　
　　}
　　
　　//隱藏一級子菜單
　　function hideSubMenu1(){
　　//pops[0].hide();
　　window.setTimeout("pops[0].hide()", 1000);
　　}
　　
　　//隱藏二級子菜單
　　function hideSubMenu2()
　　{
　　//clearTimer();
　　//timer = window.setTimeout("pops[1].hide()", 1000);
　　pops[1].hide();
　　}
　　
　　//隱藏所有下拉

上一篇：javascript+xml實現二級下拉菜單一

下一篇：Java與JavaScript的通信lixiaolong3456