javascript+xml实现二级下拉菜单二
2008-01-05 10:17:26 来源：WEB开发网核心提示：三、典型的xml配置<?xml version="1.0" encoding="GB2312"?><popmenu><!--样式定义--><style><!--主菜单样式定义--><main-menu><
三、典型的xml配置
<?xml version="1.0" encoding="GB2312"?>
<popmenu>
<!--样式定义-->
<style>
<!--主菜单样式定义-->
<main-menu>
<!--基本样式，只要节点符合table style attribute即可-->
<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>
<!--基本样式，节点符合td style attribute即可，可选。鼠标移出时使用该样式-->
<base>
<background-color></background-color>
<color>#000099</color>
</base>
<!--鼠标悬停时的样式,节点符合td style attribute即可,可选-->
<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>
<!--基本样式，只要节点符合table style attribute即可-->
<base>
<font-size>9pt</font-size>
<border>1 solid black</border>
<cursor>default</cursor>
</base>
<!--菜单项的样式-->
<menu-item>
<!--基本样式，节点符合tr style attribute即可，可选。鼠标移出时使用该样式-->
<base>
<background-color>white</background-color>
<color>#006699</color>
</base>
<!--鼠标悬停时的样式，节点符合tr style attribute即可，可选。-->
<mouse-over>
<background-color>#DDDDDD</background-color>
<color>#000066</color>
</mouse-over>
<!--菜单项与项之间的分割线，参数符合border样式即可。可选-->
<split-line>1 solid #999999</split-line>
</menu-item>
</sub-menu>
</style>
<!--
context path相当于虚拟目录的别名。假如菜单的链接使用绝对路径访问，则建议设置该节点。
假如设置该节点则菜单的链接地址由该值加上菜单项设置的href构成。
该节点是可选的
-->
<context>
<path></path>
</context>
<!--
菜单数据。
menus下的节点视为主菜单，只有主菜单设置的宽度值才有效
菜单必须有text,href两个属性，target为可选属性，默认值为"_self"
text - 菜单文本
href - 菜单链接地址。假如不需链接请用"#"；假如是执行某段javascript，请加上前缀Javascript:
target - 菜单打开的窗口
-->
<menus>
<menu text="CSDN" href="#" target="_blank" width="60">
<menu text="网站首页" href="http://www.csdn.net" target="_blank">
</menu>
<menu text="服务" href="#">
<menu text="blog" href="http://blog.csdn.net/"></menu>
<menu text="技术社区" href="http://community.csdn.net/"></menu>
<menu text="帮助" href="javascript:help();"></menu>
</menu>
</menu>
<menu text="SOHU" href="http://www.sohu.com" target="_blank" width="60">
</menu>
<menu text="NCUCEC" href="http://www.infocespace.cn" target="_blank" width="60">
<menu text="公司网站" href="http://www.infospace.cn" target="_blank"></menu>
<menu text="内部论坛" href="http://www.infospace.cn/forums" 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即可。
（3）主菜单项之间可以设置分割图片，
子菜单项可以设置分割线的样式。
（4）所有图片都由CSS控制，避免路径问题。
（5）可以设置虚拟目录的别名，为菜单链接使用绝对路径带来方便，如：
<context>
<path>hdsa</path>
</context>
设置该值后，用户只需根据文件的目录结构写好菜单，而不必担心虚拟目录的问题。
由于菜单使用了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();
}
//隐藏所有下拉
Tags：javascript xml 实现
编辑录入：爽爽 [复制链接] [打 印]
中查找“javascript+xml实现二级下拉菜单二”更多相关内容
中查找“javascript+xml实现二级下拉菜单二”更多相关内容更多精彩
赞助商链接
