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="网站首页" 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();
　　}
　　
　　//隐藏所有下拉

上一篇：javascript+xml实现二级下拉菜单一

下一篇：Java与JavaScript的通信lixiaolong3456