利用ASP和XML制作菜单导航系统
来源:网页教学 时间:06-12-25 点击: 点击这里收藏本文
< 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='images/tri.gif' >";
var currentNode = "";
var newNode = "";
var currentMenu = "";
var startMenu = "menu1";
var level = 1;
var arrayHolderArray = new Array();
var arrayNamesArray = new Array();
var tempString = "";
//数组的名字为DIV名字加"_Array"
eval("var " + startMenu + "_Array = new Array()")
for (var i=0;i< XMLRoot.childNodes.length;i++) {
currentNode = XMLRoot.childNodes.item(i);
if (currentNode.hasChildNodes() == true && currentNode.childNodes.length >1) {
currentMenu = startMenu + "_" + (i+1);
thisMenu = startMenu;
if (currentNode.childNodes.length >2) {
sMenuItem = escape("< SPAN id="" + thisMenu + "_span" + (i+1) +
" class='cellOff' onMouseOver="stateChange('" +
currentMenu + "',this," + level +
")" onMouseOut="stateChange('',this,'')" >" +
image + currentNode.childNodes.item(1).text +
"< /SPAN >< BR >
");
eval(startMenu + "_Array[i] = sMenuItem")
walkTree(currentNode)
} else {
sMenuItem = escape("< SPAN id="" + thisMenu + "_span" + (i+1) +
"" class='cellOff' " +
"onMouseOver="stateChange('',this,'');hideDiv(" +
level + ")" onMouseOut="stateChange('',this,'')" " +
"onClick="location.href='" +
把此文章收藏到：
