利用ASP和XML制作菜单导航系统
来源:网页教学 时间:06-12-25 点击: 点击这里收藏本文
//结束函数返回前一菜单项
level -= 1;
}
如果能够找到子节点，则函数以当前节点为参数调用自己。每次函数调用自己都生成相应的数组和sMenuItem变量。当前菜单的名字通过变量currentMenu保存，并在thisMenu中保存一个新的名字，这使得程序可以方便地找出菜单项之间的层次关系，在后面的客户端脚本我们可以看到这一点。
请仔细阅读walkTree()函数的结束部分。在前面代码中创建的arrayNamesArray数组用来保存菜单的名字，接下来变量tempString获取当前节点的所有数组信息并将它组织成为一个字符串，这个字符串被加入到另外一个名为arrayHolderArray的数组。数组arrayNamesArray的用途是保存菜单项的名字，把菜单项（及其下属的子菜单项）放入< DIV >区时需要用到这些名字，所有< DIV >区将参考arrayNamesArray的内容命名。数组arrayHolderArray保存所有那些将写入各个< DIV >区的信息，这些信息包括菜单项的名字、链接以及客户端脚本的事件信息。
这些数组之间的关系初看起来有点复杂，仔细观察其实不难理解。walkTree函数利用这些数组在少量的代码之内完成了大量的工作。
准备好上述数组之后，接下来就可以把< DIV >区以及它们的内容写入Web页面。下面的代码负责这部分工作（参见XMLcreateMenu_Dynamic.asp）。
//翻转数组以便形成正确的< DIV >次序
arrayHolderArray.reverse()
arrayNamesArray.reverse()
//遍历数组,输出< DIV >标记以及各个菜单项的代码
for (i=0;i< arrayNamesArray.length;i++) {
Response.Write("< div id='" + arrayNamesArray[i] + "' class='clsMenu' >");
Response.Write(arrayHolderArray[i]);
Response.Write("< /div >
");
}
为何要将数组的次序翻转一下呢？简而言之，它将简化我们以后的操作。翻转之后，程序输出的< DIV >区即以层次结构中的最前面子菜单到最后面子菜单为序；或者说，翻转数组之后保证各个< DIV >区在Z-轴方向上有正确的次序。如果你还是不能一下子领会，那么请看下图，这是在注释了两个reverse方法调用后的菜单效果：
翻转数组之后，接着就输出< DIV >标记及其内容。如前所述，< DIV >区的名字由数组arrayNamesArray决定，< DIV >区的内容由数组arrayHolderArray决定。下面的代码是前面代码所输出< DIV >区的一个片断，其他< DIV >区也非常相似：
< div id='menu1' class='clsMenu' >
< span id="menu1_span1"
class='cellOff'
onMouseOver="stateChange('',this,'');hideDiv(1)"
onMouseOut="stateChange('',this,'')"
onClick="location.href='/default/default.asp'" >主页
< /span >< br >
< span id="menu1_span2"
class='cellOff'
onMouseOver="stateChange('menu1_2',this,1)"
onMouseOut="stateChange('',this,'')" >
< img align=right vspace=2 height=10
width=10 border=0 src='images/tri.gif' >娱乐休闲
< /span >< br >
< /div >
XMLMenuScript.js文件包含了所有支持客户端菜单操作的JavaScript代码。在文件前面定义的变量可以用来定制菜单项在各种状态（选中或不选中）下的显示颜色，具体请参见XMLMenuScript.js中的说明。应当说明的是，在当前实现中，客户端脚本代码要求运行在IE 4或以上版本。如果你希望菜单同时能够支持Netscape浏览器，这部分代码要作相应的修改。
当用户单击某个链接（如本文的“网站”）时菜单系统启动。启动菜单的HTML代码如下所示：
把此文章收藏到：
