正文 - javascript+xml实现二级下拉菜单二 - Linux文库

Linux宝库
Linux文库
Java
XML
XMLBeans
this is a extra element for clear the floated element

javascript+xml实现二级下拉菜单二
12/31 2008	XMLBeans \| Java	3764 次查看
上一条：XML卷之实战锦囊（1）：动态排序下一条：javascript+xml实现二级下拉菜单一
三、典型的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(); 　　} 　　//隐藏所有下拉

您可能感兴趣的:

更多相关内容

相关文档
最受欢迎
最新文档