第二部分 javascript读取XML数据 对应程序文件TMenuXML.js

定义了良好的XML格式数据之后就可以通过Javascrip读取了，这里我们定义了一个javascrip类，用来读取：
function TMenuXML(_filename){
 this.isShowTree = false;
 //需要装载的XML文件名称
 var XMLFileName=_filename;
 //javascrip XML 对象
 var XMLDoc = new ActiveXObject("MSXML2.DOMDocument.3.0");
 //到文件左边的空格数量
 var LeftMargin=0;

 //对象初始化函数
 this.Create=function(){}

 //取得节点的数据、文本
 //也可以取得节点属性的值
 this.getNode=function(doc, xpath) {}

 //递归读取下一个需要循环的菜单
 this.getNextNode=function(_Node){}

 //构造菜单
 this.BuildMenu=function(_Menus){}

 this.getLeftMarginStr=function(){}
}

大家可以看到，解析XML是通过微软的MSXML2.DOMDocument.3.0对象实现的，这个对象也是TMenuXML类里面的核心属性，我们称其为XMLDoc，另外还有一个重要的属性叫做XMLFileName，用来保存XML文件的路径，其他一些属性的作用在注释钟都有说明。

各种属性定义之后，我们来看一些重要的方法，首先是Create方法，这是初始化方法，其作用是初始化菜单以及装载菜单数据：
//对象初始化函数
this.Create=function(){
 if(XMLDoc.load(XMLFileName)){
  var Menus = XMLDoc.selectSingleNode("/Data/Menu");
  this.BuildMenu(Menus);
 }
}
首先判断菜单数据是否加载成功，若成功就调用XML对象的selectSingleNode("/Data/Menu")方法，selectSingleNode方法返回一个由参数(XPATH，和虚拟路径类似)指定的节点。接着调用BuildMenu()方法构造菜单。

BuildMenu()方法是XML数据解析中最重要的一个方法，在这个方法中还用到了我们定义的另一个Menu对象，关于这个对象我们会在下一部分讲解，还是先来看看BuildMenu()方法的代码：
if (_Menus!=null) {}
首先是对参数_Menus的判断，如果传递过来的菜单数据是空的，就直接退出。

接着是三个判断，分别构造菜单、子菜单、菜单项
//按照情况构造Menu菜单
If(_menus.Nodename=="Menu"){
}
//按照情况构造SubMenu菜单
if(_Menus.nodeName=="SubMenu"){
}
//按照情况构造MenuItem菜单
if(_Menus.hasChildNodes){
}
在构造菜单和子菜单的时候都是调用Menu对象的方法，需要注意的就是构造菜单项的时候，首先取得子菜单，若有子菜单则判断是否是菜单项，若是则创建菜单项，否则判断是否还有子菜单，进入递归调用。当该层次上的菜单构造结束之后进入下一层的递归。
//按照情况构造MenuItem菜单
if(_Menus.hasChildNodes){
 _MenuNode = _Menus.firstChild;
 while(_MenuNode != null){
  if(_MenuNode.nodeName=="MenuItem"){
   if(this.isShowTree){
    document.write(this.getLeftMarginStr() + "·" + this.getNode(_MenuNode, "@text") +"<br>");
   }
   _m.addMenuItem(_m.CurrentMenuBoard, this.getNode(_MenuNode, "@text"), this.getNode(_MenuNode, "@icon"), this.getNode(_MenuNode, "@href"), this.getNode(_MenuNode, "@targ"), false);
  }
  
  if(_MenuNode.hasChildNodes){
   this.BuildMenu(_MenuNode);
  }
  
  _MenuNode = this.getNextNode(_MenuNode);
 }
}
完整的代码请参考范例。

在上面的代码中还使用了一些内部方法，这里逐一介绍：

首先是取得节点的数据、文本，同时也可以取得节点属性的值。
this.getNode=function(doc, xpath) {
 var retval = "";
 var value = doc.selectSingleNode(xpath);
 if (value) retval = value.text;
 return retval;
}
getNode方法返回指定XML对象的XPATH上的数据、文本或者某个属性的数据。可以像下面的范例这样使用，范例表示取得当前节点上的@text属性的数据：
this.getNode(_MenuNode, "@text");
也可以从文档的根开始写：
this.getNode(_MenuNode, "/Data/Menu/@text");

getNextNode是递归读取下一个需要循环的菜单的函数，函数能够自动在各层菜单之间递归循环，即如果本层没有下级菜单时会自动向上以及继续寻找下级菜单。返回找到的菜单。
this.getNextNode=function(_Node){
 if(_Node == null) return null;
 
 if(_Node.nextSibling != null){
  return _Node.nextSibling;
 }else{
  LeftMargin -= 1;
  _m.CurrentMenuBoard = _m.getParentBoard(_m.CurrentMenuBoard);
  return this.getNextNode(_Node.parentNode);
 }
}

这一部分的代码比较复杂，除了熟练使用javascript之外对微软的XML对象也要比较熟悉。下一部分介绍构造菜单的对象。

第三部分 javascript构造菜单 对应程序文件menu.js

这一部分主要介绍用javascript在HTML文件中生成菜单，我们采用DIV、TABLE等等一些HTML脚本对象，用DHTML脚本和CSS来控制这些对象的显示和隐藏。控制还要用到javascript事件，主要包括onmouseover、onmouseout等等。

先看看我们都定义了那些属性：说明最后跟随的是属性的对象类型。
//菜单条<TR>
this.MenuBar;
//内容面板，所有的菜单内容都在这个上面<div>
this.ContentPane;
//当前的菜单，在菜单条上显示的菜单项目<TD>
this.CurrentMenu;
//当前菜单面板，显示菜单项目列表的容器<TABLE>
this.CurrentMenuBoard;
//当前的菜单项目<TR>
this.CurrentMenuItem;
this.cellIndex=0;

主要用到的方法：
//增加菜单条
//同时设置MenuBar和ContentPane
this.addMenuBar=function(){}

//在菜单条上增加菜单
//同时设置当前菜单
//参数：菜单的文本内容
this.addMenu=function(_mStr){}

//增加菜单项目列表容器
//同时设置当前的容器
//参数：容器的所有者（或者parentElement），是否为顶级容器
this.addMenuBoard=function(_owner, _isTop){}

//增加菜单项
//同时设置当前菜单项
//参数：菜单项目列表容器，菜单项文本，图表(16 x 16)，链接位置，窗口目标，是否有下级菜单
this.addMenuItem=function(_board, _mStr, _mIcon, _mHref, _mTrg, _hasSubMenu){}

//显示_owner的菜单项目列表
function showMenuBoard(_owner){}

//隐藏_owner的菜单项目列表
function hiddenMenuBoard(_owner){}

//设置菜单项目的背景颜色
//参数：菜单项，是否选中
function setMenuItemBgColor(_mItem, _isSelect){}

//递归_board的父菜单项列表容器
this.getParentBoard=function(_board){}

下面我们开始介绍这些方法中的重点代码片断：
在addMenu方法中主要是增加菜单条，我们用DIV作为菜单的容器，通过下面的代码创建DIV并添加到BODY中：
this.ContentPane = document.createElement("div");
document.body.insertAdjacentElement("beforeEnd",this.ContentPane);
类似的代码在接下来的方法中会频繁的出现，就不再说明了。

在addMenu方法中主要是在table中插入一列，并且设置列上的相关事件。
下面的代码用来插入列：
_menu = this.MenuBar.insertCell();
下面的代码设置菜单上的事件：
_menu.onmouseover = function(){
 _menu.parentElement.cells(this.cellIndex).style.cssText = "background-color:#B5BED6;border:1px solid #08246B";
 showMenuBoard(_menu.parentElement.cells(this.cellIndex));
}

addMenuBoard方法是用来增加菜单面板的方法，说采用的防范也和上面类似，下面我们直接介绍这里的核心方法：
//递归_board的父菜单项列表容器
this.getParentBoard=function(_board){
 if(_board == null) return null;
 if(_board.parentElement == null) return null;
 
 if (_board.parentElement.tagName=="TABLE"){
  return _board.parentElement;
 }else{
  return this.getParentBoard(_board.parentElement);
 }
}

getParentBoard方法是搜索合适的DHTML容器对象的方法，在插入菜单项的时候若是三级以上的菜单，则有一个单独使用的菜单面板，插入了所有的菜单项之后，需要向上一级以插入后续的菜单，使用方法可以参考TMenuXML.js文件中的代码：

//递归读取下一个需要循环的菜单
this.getNextNode=function(_Node){
 if(_Node == null) return null;
 
 if(_Node.nextSibling != null){
  return _Node.nextSibling;
 }else{
  LeftMargin -= 1;
  _m.CurrentMenuBoard = _m.getParentBoard(_m.CurrentMenuBoard);
  return this.getNextNode(_Node.parentNode);
 }
}

好了，终于写好了，希望对大家有些帮助吧，这个里面涉及的内容比较多，耐心看到这里的也是不容易啊。说声谢谢！！

wynn
2005-6-13

演示地址：http://bugos.nowans.com/?o=ReloadAllTemplate

程序说明
-------------------------------
用javascript和XML创建可自由定义的菜单
直接双击menu.htm就可以看到演示

点击下载范例代码