用Javascript及XML创建可自由定义菜单.doc

="" targ="_self"/>
<MenuItem text="空白解决方案..." icon="" href="" targ="_self"/>
</SubMenu>
<SubMenu text="打开" icon="images/folder.gif" href="" targ="_self">
<MenuItem text="项目..." icon="" href="" targ="_self"/>
<MenuItem text="Web上的项目..." icon="" href="" targ="_self"/>
<MenuItem text="文件..." icon="" href="" targ="_self"/>
<MenuItem text="来自Web的文件..." icon="" href="" targ="_self"/>
<MenuItem text="转换..." icon="" href="" targ="_self"/>
</SubMenu>
<MenuItem text="关闭" icon="" href="" targ="_self"/>
<MenuItem text="-" icon="" href="" targ="_self"/>
<SubMenu text="添加项目" icon="" href="" targ="_self">
<MenuItem text="新建项目..." icon="" href="" targ="_self"/>
<MenuItem text="现有项目..." icon="" href="" targ="_self"/>
<MenuItem text="Web上的现有项目..." icon="" href="" targ="_self"/>
</SubMenu>
<MenuItem text="-" icon="" href="" targ="_self"/>
<MenuItem text="退出" icon="" href="" targ="_self"/>
</Menu>
<Menu text="编辑" icon="" href="" targ="_self">
<MenuItem text="撤销" icon="" href="" targ="_self"/>
<MenuItem text="重复" icon="" href="" targ="_self"/>
<MenuItem text="-" icon="" href="" targ="_self"/>
<MenuItem text="剪切" icon="" href="" targ="_self"/>
<MenuItem text="复制" icon="" href="" targ="_self"/>
<MenuItem text="粘贴" icon="" href="" targ="_self"/>
<MenuItem text="-" icon="" href="" targ="_self"/>
<SubMenu text="文本格式" icon="" href="" targ="_self">
<SubMenu text="艺术格式" icon="" href="" targ="_self">
<MenuItem text="艺术1" icon="" href="" targ="_self"/>
<MenuItem text="艺术2" icon="" href="" targ="_self"/>
</SubMenu>
</SubMenu>
<MenuItem text="选项..." icon="" href="" targ="_self"/>
</Menu>
</Data>

定义菜单结构相对比较容易，下一部分介绍如何通过javascript来解析XML数据。

第二部分 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);
}
}

本文来自CSDN博客，转载请标明出处：