1．1 概述 



　　 高效地利用Web页面有限的空间并不容易，特别是要在页面中安排大量的链接时尤为困难。如何才能组织好各种链接以便为其它重要内容留出空间？是一次性地展示所有链接还是分成多个页面把它们深深地隐藏起来？显然，这两种方法都不理想。利用DHTML，我们可以在为用户提供快速方便的访问链接的同时，为其它内容保留足够的页面空间。 



　　 本文介绍一个菜单系统的实现。这个菜单与Windows的“开始”菜单非常相似，用户只需点击一次鼠标即可访问所有链接。菜单的内容由XML文档定义，客户端行为由DHTML实现。XML文档的解析在服务器端完成，因此对用户浏览器是否支持XML并没有要求。







　　 







　　　　　 【图1】 



　　 上图是菜单运行的一个实例。本文接下来的内容具体介绍其实现，包括XML文档的结构以及如何分析这个XML文档、配合客户端JavaScript一起构造出最终的菜单。 



　　 1．2 静态和动态 



　　 页面内容动态生成是指在用户请求时才动态地（自动地）生成内容，静态内容则是将自动生成的内容保存为文件，用户请求的时候发送给他们的是这些静态的文件。有读者曾经来信指出这个问题，我们在《再论Web内容的发布——用XML与ASP分离内容与设计》中转发了读者来信并谈了自己的看法。 



　　 依赖于菜单的实际大小和菜单内容变化的频繁程度，有些时候可能不想让菜单动态生成。这时候可以将菜单代码做成静态的：运行本文介绍的脚本，将所生成的菜单HTML代码保存为包含文件再直接引用就可以了。如果可以采用这个方案的话，它将节省大量宝贵的服务器资源。 



　　 本文以动态菜单为例具体介绍实现原理。不过为了方便读者，在下载包中我们提供了两个版本的服务器脚本，分别用于动态生成菜单和生成静态的菜单HTML代码。使用静态版本时，先打开xmlCreateMenu_Entry.asp页面，在这里输入如下两个信息：第一是所使用的XML文件，第二是包含文件的路径，这个包含文件将保存HTML格式的菜单代码。输入上述信息后即可自动运行服务器脚本生成菜单代码。以后如果要改变菜单内容，只要修改XML文件，然后再重复上述过程就可以了。 



　　 使用静态菜单时，参考本文default.asp中的动态菜单使用方法，只需将default.asp中的< !--#include file="XMLCreateMenu_Dynamic.asp"-- >改成包含静态菜单文件即可。 



　　 1．3 数据结构 



　　 XML无疑是当前最为热门的话题之一，人们普遍相信未来的Web就在于XML。不过本文使用XML来定义菜单内容并非是为了赶时髦，在这里使用XML确实有其特别的好处。 



　　 首先，既然使用了菜单系统，那么它就不大可能只用在一、二个页面上，往往是整个网站的所有页面都要用到同一菜单。这就要求能够快速地构造菜单，尽量地减少访问菜单定义数据所消耗的时间。第二，菜单是一个层次结构，定义菜单内容的数据最好也具有层次结构。这不仅可以方便地体现出各个菜单项之间的从属关系（从而有利于修改），而且在本文后面我们还可以看到，用递归函数来分析层次结构的数据是相当方便的。 



　　 XML可以很好地满足这两个要求，不仅数据可以快速地访问（无需额外的网络连接，无需登录数据库等），而且XML能够非常自然地描述出数据的层次结构。此外，前面我们已经提到，XML文档的解析在服务器端完成，因此并不要求用户浏览器支持XML。 



　　 编辑XML文档既可以使用普通的文本编辑器，也有许多专用的XML编辑器可供选择，有关这方面的内容以及XML基础概念的说明，请参见《XML简明教程》，也请参见XML Tools。 



　　 创建菜单系统的第一步是在XML文档中定义菜单内容。在考虑了几种可能的方法之后，我们决定采用最简单的一种方法，使得不太熟悉XML的读者也能理解和更改这个XML文件。每一个菜单项至少包含两个数据，即菜单项的文本和链接；如果菜单项拥有多个子菜单，可以很方便地加入子节点。为保持整个系统的简洁性，菜单最多不能超过三层。下面是本文XML文件的一个片断。 



　  < menuItem >

　 < hyperLink/ >

　 < name >娱乐休闲< /name >

　 < menuItem >

　< hyperLink >Link1.asp< /hyperLink >

　< name >游戏< /name >

　 < /menuItem >

　 < menuItem >

　< hyperLink >link4.asp< /hyperLink >

　< name >汽车/摩托车< /name >

　 < /menuItem >

　  < /menuItem >



　　 每一个菜单项由一个< menuItem >标记定义，它至少有两个子节点：子节点< hyperLink >定义的是该菜单项的链接，而< name >包含该菜单项文本。 



　　 可以看到，前面代码中的第一个< hyperLink >没有给出链接，这是因为这个菜单项用来弹出子菜单，它并不指向任何具体的Web页面。子节点的定义方法和父节点定义方法相同，使用的都是< menuItem >标记。这种分层结构可以一直嵌套下去，但我们已经提到，嵌套层次不宜过多，菜单系统的唯一目的应该是方便用户访问，而不是使得访问更加困难。 2．1 遍历XML树 



　　 在XML文档中定义了菜单内容后，接下来的任务是遍历和分析这些层次结构的数据、生成菜单的HTML代码。这主要通过一个递归函数walkTree实现。这部分代码的效率非常重要，不能为了生成菜单而让用户等待太长的时间。 



　　 在调用递归函数walkTree之前，我们首先要找出XML文档的根。这个根可以利用以下代码得到（完整的代码请从本文后面下载）： 



　var XMLRoot = XMLDoc.documentElement;



　　 在得到文档的根后，接下来程序创建一个数组来描述菜单项之间的层次关系。如下面的代码所示，这个数组以JavaScript的eval函数动态命名。变量startMenu决定完整菜单名字的基础部分，从本文后面我们还可以看到，客户端代码也要利用该菜单名字来激活菜单。 



　var image = "< img align=right vspace=2 height=10 

　width=10 border=0 src="/edu/files/pic/2006-5/21/0652109535094772.gif"" width="20" height="11" border=0 >

　< /A >



　　 onClick事件中指定的startIt()函数有三个参数：菜单名字，一个链接本身的引用，菜单层次。由于此时刚开始启动菜单系统，因此指定层次为0。 



　　 虽然一个页面中可以有一个以上的菜单，但任何时候可见的菜单只有一个。startIt()函数检查菜单是否已经激活。如果没有激活，则调用下面的stateChange()函数。此外，startIt()还必须在菜单活动的时候隐藏HTML < SELECT >元素和Java Applet（如果存在的话，参见startIt()的实现代码）。 



　function stateChange(menu,thisItem,level) {  

　//menu =待显示的菜单,thisItem=当前菜单项的< SPAN >

　//level=菜单嵌套层次

　  

　  //鼠标所指向的菜单项改变,改变高亮度状态

　  if (currentSpanElement != thisItem.id && started != true) { 

　 //这行代码仅在第一次进入时有用

　 if (currentSpanElement == "") currentSpanElement = thisItem.id; 

　 eItemOld = eval("document.all('" + currentSpanElement + "')");

　 eItemNew = eval("document.all('" + thisItem.id + "')");

　 eParent = eItemNew.parentElement;

　 //必须设置DIV背景色,否则默认透明

　 eParent.style.background = offCellColor;

　

　 //取消以前鼠标停留菜单项的高亮度颜色

　 eItemOld.style.background = offCellColor;

　 eItemOld.style.color = offTextColor;

　 //突出显示新选中的菜单项

　 eItemNew.style.background = onCellColor;

　 eItemNew.style.color = onTextColor;

　 //跟踪最后鼠标停留的位置

　 currentSpanElement = thisItem.id; 

　  }

　  

　  if (menu != "") {

　 eMenu = eval("document.all('" + menu + "')"); 

　 eItem = eval("document.all('" + thisItem.id + "')"); 

　 hideDiv(level);

　 //跟踪已经打开(显示)的菜单

　 menuArray[menuArray.length] = menu; 

　 var positionX =  eItem.parentElement.offsetLeft + 

　offsetMenuX + document.body.scrollLeft;

　 var positionY =eItem.parentElement.offsetTop + 

　eItem.offsetTop + offsetMenuY + document.body.scrollTop;

　 if (started) {

　positionX = clickX + startDistanceX + document.body.scrollLeft  

　positionY = clickY + startDistanceY + document.body.scrollTop 

　 }

　 //如果屏幕宽度不足,将菜单显示位置左移

　 if ((positionX + eMenu.offsetWidth)  >= document.body.clientWidth) {

　positionX -= (eMenu.offsetWidth * 1.3);

　positionY += 15;

　 }

　 //如果菜单位置偏左,则右移

　 if ((positionX + eMenu.offsetWidth) < = eMenu.offsetWidth) {

　positionX += (eMenu.offsetWidth * 1.3);

　 }

　 //如果菜单偏下,则上移菜单,使其底部和浏览窗口底部对齐

　 if ((positionY + eMenu.offsetHeight)  >= document.body.clientHeight) {

　if (started != true) positionY = document.body.clientHeight - eMenu.offsetHeight;

　 }

　 eMenu.style.left = positionX;

　 eMenu.style.top = positionY;

　 //如果没有在ASP脚本中翻转数组,使用下面这行代码

　 //eMenu.style.zIndex = level;  

　 eMenu.style.visibility='visible';

　  }

　  //菜单已经显示

　  started = false;

　}



　　 stateChange()函数有三个参数：菜单名字，当前菜单项的< SPAN >元素，以及层次。如果用户选择了一个不同的< SPAN >元素（菜单项），stateChange()改变该菜单项的背景和文本颜色，同时改变以前选中菜单项的状态。此外，stateChange()还负责调用其他函数隐藏菜单以及在菜单位置不合适时，修改菜单的位置。 



　　 菜单所用的样式在menuStyle.css中，修改该文件可调整菜单的外观。 



　　 请从这里下载本文代码，8 K。