一、简单说明 该菜单最大的优点是可以跨过网页上任何标签,甚至是框架,(一般的菜单会被select,object,flash等挡住)所以如果你有这方面的需要,那么这个菜单是个很好的选择。 总体而言,它有如下特性: (1)菜单的样式和数据都是通过xml配置 (2)菜单的样式可以随心所欲修改,如: 只要节点名称符合各自标签(table,tr,td之一)的style attribute即可。 (3)主菜单项之间可以设置分割图片,子菜单项可以设置分割线的样式。 (4)所有图片都由css控制,避免路径问题。 (5)可以设置虚拟目录的别名,为菜单链接使用绝对路径带来方便,如: 设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。 由于菜单使用了window.createPopup(),所以它被限制在IE5.5以上,而且子菜单如果是新开窗口,会被拦截。 注:用window.createPopup()制作菜单受到过前人的启发 设置该值后,用户只需根据文件的目录结构写好菜单,而不必担心虚拟目录的问题。 由于菜单使用了window.createPopup(),所以它被限制在IE5.5以上,而且子菜单如果是新开窗口,会被拦截。 注:用window.createPopup()制作菜单受到过前人的启发 ===================================================================== 二、实现的两个脚本可以写在一个文件中: (1)处理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("//popmenu/menus").childNodes; //得到虚拟目录 if( m_doc.selectSingleNode("//popmenu/context/path") ) { m_strContextPath = m_doc.selectSingleNode("//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 ++ ) { var nodeName = nodeList[i].nodeName; var nodeText = nodeList[i].text; strStyle += nodeName.toLowerCase() + ":" + nodeText + ";"; } } return strStyle; } /** *构造节点Style Property */ function getNodeProperty(strPath) { var arrProperty = {}; if( m_doc.selectSingleNode(strPath) ) { var nodeList = m_doc.selectSingleNode(strPath).childNodes; for( var i = 0;i < nodeList.length;i ++ ) { var nodeName = nodeList[i].nodeName; nodeName = nodeName.toLowerCase(); var nodeText = nodeList[i].text; //由attribute到property的转变。如background-color -> backgroundColor var aName = nodeName.split("-"); var strProperty = aName[0]; for( var j = 1;j < aName.length;j ++ ) { strProperty += aName[j].substring(0,1).toUpperCase() + aName[j].substr(1); } arrProperty[strProperty] = nodeText; } } return arrProperty; } /** *得到主菜单样式 */ function getMainMenuStyle() { //得到主菜单样式 m_strMainMenuStyle = getNodeStyle("//popmenu/style/main-menu/base"); //得到主菜单项样式 m_strMainMenuItemStyle = getNodeStyle("//popmenu/style/main-menu/menu-item/base"); //主菜单项的property m_strMMItemProBase = getNodeProperty("//popmenu/style/main-menu/menu-item/base"); //得到鼠标悬停时主菜单项各property改变 m_strMMItemProMOver = getNodeProperty("//popmenu/style/main-menu/menu-item/mouse-over"); //得到菜单项与项之间的分割图片 if( m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image") ) { var node = m_doc.selectSingleNode("//popmenu/style/main-menu/menu-item/split-image"); m_strMMItemSplitImg = "background-image:" + node.text + ";"; m_strMMItemSplitImg += "background-repeat:no-repeat;background-position:center center;"; } }//end function getMainMenuStyle() /** *得到主菜单样式 */ function getSubMenuStyle() { //得到子菜单样式 m_strSubMenuStyle = getNodeStyle("//popmenu/style/sub-menu/base"); //得到子菜单项样式 m_strSubMenuItemStyle = getNodeStyle("//popmenu/style/sub-menu/menu-item/base"); //子菜单项的property m_strSMItemProBase = getNodeProperty("//popmenu/style/sub-menu/menu-item/base"); //得到鼠标悬停时子菜单项各property改变 m_strSMItemProMOver = getNodeProperty("//popmenu/style/sub-menu/menu-item/mouse-over"); //得到子菜单项下边框样式(作为分割线) if( m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line") ) { var node = m_doc.selectSingleNode("//popmenu/style/sub-menu/menu-item/split-line"); m_strSMItemBorderB = "border-bottom:" + node.text + ";"; } }//end function getSubMenuStyle() var m_bolFirst = true;//是否首次响应菜单 document.onclick = function(){ m_bolFirst = true; //alert(parent.frames[0]); } top.document.onclick = function(){ m_bolFirst = true; } /** *展开各个主菜单 *@param objTd - 主菜单所在td *@param strSubMenuID - 对应子菜单的id *@param bolExistSubMenu - 是否存在子菜单 */ function spreadMainMenu(objTd,strSubMenuID,bolExistSubMenu){ var strEvent = event.type.toLowerCase(); if( !pops[0].isOpen && strEvent == "mouseover" && m_bolFirst){ return; } if( pops[0].isOpen && strEvent == "click"){ return; } chgMainMenuStyle(objTd,true); endHideSubMenu(); if( bolExistSubMenu ){ //如果有子菜单 showSubMenu1(objTd,strSubMenuID); } else { //hideSubMenu(); //m_bolFirst = false;//已不是第一次响应菜单 } } //打印主菜单 function printMainMenu() { var divStyle = "width:100%;"; var strHtml = ""; strHtml = " "; ";strHtml += "
strHtml += " document.write(strHtml); }//end printMainMenu() //打印一级子菜单 function printSubMenu() { for ( var i = 0 ; i< m_objMMList.length ; i ++ ) { menuNode = m_objMMList[i]; //如果没有子菜单,执行下一个循环 if ( !menuNode.hasChildNodes() ){ continue; } //得到主菜单下的子菜单集合 var objSMList = menuNode.childNodes; var intSubMenuLen = objSMList.length; //每个主菜单对应的子菜单id var strSubMenuID = "sm" + i; //arrMenuID.push(strSubMenuID); var strSubMenuHtml = " "; document.write(strSubMenuHtml); }//end for 主菜单个数循环 }//end function printSubMenu() /**打印二级子菜单 *objSubMenu : 一级子菜单对象 *strSubMenu2ID :将要打印的二级菜单的id *strPosition:主菜单和一级子菜单文本描述 */ function printSubMenu2(objSubMenu,strSubMenu2ID,strPosition) { //arrMenuID.push(strSubMenu2ID); var objSMList = objSubMenu.childNodes; var intSubMenu2Len = objSMList.length; var strSubMenu2Html = " "; document.write(strSubMenu2Html); }//end function printSubMenu2 /** *打开链接,所有菜单的链接都是通过这个函数来打开。并显示位置信息 *@param strUrl - 打开链接的地址 *@param strTarget - 打开链接的target。如_self,_blank等 *@param strViewText - 位置信息 */ function onClickEvent(strUrl,strTarget,strViewText) { m_bolFirst = true;//以后响应菜单时变为为第一次响应 //document.all.selected_menu.innerText = strViewText; m_strTitle = ""; var arrText = strViewText.split("->"); if ( arrText.length >0 ) m_strTitle = arrText[0]; for (var i = 1; i < arrText.length ; i ++ ) { m_strTitle += "-" + arrText[i]; } m_strTitle = m_strTitle.substring(STR_POS_FRONT.length); //隐藏下拉菜单 hideSubMenu(); //显示title if (m_strTitle != "") { //parent.document.title = m_strTitle; } if ( strUrl == "#" ) return; //如果url是一个javascript字符串则直接执行之 if(strUrl.toLowerCase().indexOf("javascript") != -1) { executeScript(strUrl); return; } strUrl = m_strContextPath + strUrl;//地址应加上虚拟目录 window.open(strUrl,strTarget); } //执行一个javascript字符串 function executeScript(strScript) { //第一个eval得到该字符串表示的变量,第二个eval则执行变量里的脚本 eval(strScript); } |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-30 13:22 , Processed in 0.161672 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.