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

2019-11-18 12:48:51

字體：大中小

來源：轉載

供稿：網友

　　一、簡單說明
　　
　　該菜單最大的優點是可以跨過網頁上任何標簽，甚至是框架，（一般的菜單會被select,object,Flash等擋?。┧约偃缒阌羞@方面的需要，那么這個菜單是個很好的選擇。
　　
　　總體而言，它有如下特性：
　　
　?。?）菜單的樣式和數據都是通過xml配置
　　
　　（2）菜單的樣式可以隨心所欲修改，如：
　　
　　<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>
　　
　　只要節點名稱符合各自標簽(table,tr,td之一)的style attribute即可。
　　
　　（3）主菜單項之間可以設置分割圖片，子菜單項可以設置分割線的樣式。
　　
　?。?）所有圖片都由CSS控制，避免路徑問題。
　　
　　（5）可以設置虛擬目錄的別名，為菜單鏈接使用絕對路徑帶來方便，如：
　　
　　<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();
　　}
　　
　　//隱藏所有下拉菜單
　　function hideSubMenu()
　　{
　　if(pops[0] != null)pops[0].hide();
　　if(pops[1] != null)pops[1].hide();
　　}
　　
　　function clearTimer()
　　{
　　if (timer != null)
　　window.clearTimeout(timer)
　　timer = null;
　　//alert("OK");
　　}
　　
　　（2）讀取分析xml數據文件，打印菜單的腳本
　　
　　//位置信息
　　var m_strTitle = "您的位置->";
　　
　　// -------- 主菜單樣式相關定義 ---------//
　　
　　//定義主菜單樣式
　　var m_strMainMenuStyle = "";
　　//主菜單項的樣式attribute
　　var m_strMainMenuItemStyle = "";
　　//主菜單項樣式PRoperty
　　var m_strMMItemProBase = {};
　　//主菜單項鼠標懸停樣式Property
　　var m_strMMItemProMOver = {};
　　//菜單項與項之間的分割圖片
　　var m_strMMItemSplitImg;
　　
　　// -------- 子菜單樣式相關定義 ---------//
　　
　　//定義子菜單樣式
　　var m_strSubMenuStyle = "";
　　//子菜單項的樣式attribute
　　var m_strSubMenuItemStyle = "";
　　//子菜單項樣式Property
　　var m_strSMItemProBase = {};
　　//子菜單項鼠標懸停樣式Property
　　var m_strSMItemProMOver = {};
　　//子菜單項下邊框樣式(作為分割線)
　　var m_strSMItemBorderB = "";
　　
　　//定義虛擬目錄路徑
　　var m_strContextPath = "";
　　
　　//菜單xml數據文件對象
　　var m_doc;
　　
　　//主菜單集合
　　var m_objMMList;
　　
　　var STR_POS_FRONT = "您的位置：";
　　
　　//loadMenu("main_menu.xml");
　　/**
　　*加載菜單
　　*@param strXMLPath - XML數據文件所在路徑及文件名
　　*/
　　function loadMenu(strXMLFile) {
　　m_doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
　　m_doc.async = false;
　　m_doc.load(strXMLFile);
　　
　　getMainMenuStyle();
　　getSubMenuStyle();
　　
　　//得到主菜單集合
　　m_objMMList = m_doc.selectSingleNode("http://popmenu/menus").childNodes;
　　
　　//得到虛擬目錄
　　if( m_doc.selectSingleNode("http://popmenu/context/path") ) {
　　m_strContextPath = m_doc.selectSingleNode("http://popmenu/context/path").text;
　　}
　　
　　//輸出主菜單
　　printMainMenu();
　　//輸出一級子菜單
　　printSubMenu();
　　
　　}
　　
　　/**
　　*鼠標移入移出主菜單樣式的改變
　　*@param obj - 改變樣式的對象
　　*@param bolChg - 是否改變樣式
　　*/
　　function chgMainMenuStyle(obj,bolChg)
　　{
　　if ( bolChg ) {//鼠標懸停改變顏色
　　for( var pro in m_strMMItemProMOver ) {
　　obj.style[pro] = m_strMMItemProMOver[pro];
　　}
　　} else {//鼠標移出
　　obj.style.border = "0";
　　for( var pro in m_strMMItemProBase ) {
　　obj.style[pro] = m_strMMItemProBase[pro];
　　}
　　}
　　}//end function chgMainMenuStyle(obj,i)
　　
　　/**
　　*鼠標移入移出子菜單樣式的改變
　　*@param obj - 改變樣式的對象
　　*@param bolChg - 是否改變樣式
　　*/
　　function chgSubMenuStyle(obj,bolChg) {
　　if ( bolChg ) {//鼠標懸停改變顏色
　　for( var pro in m_strSMItemProMOver ) {
　　obj.style[pro] = m_strSMItemProMOver[pro];
　　}
　　} else {//鼠標移出
　　for( var pro in m_strSMItemProBase ) {
　　obj.style[pro] = m_strSMItemProBase[pro];
　　}
　　}
　　}//end function chgSubMenuStyle(obj,i)
　　
　　/**
　　*構造節點樣式
　　*@param strPath 節點路徑
　　*/
　　function getNodeStyle(strPath) {
　　var strStyle = "";
　　if( m_doc.selectSingleNode(strPath) ) {
　　var nodeList = m_doc.selectSingleNode(strPath).childNodes;
　　for( var i = 0;i < nodeList.length;i ++ ) {

上一篇：Javascript+DOM訪問XML文件數據實例

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