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

用Javascript和XML创建可自由定义的菜单= targ=_self/ 定义菜单结构相对比较容易，下一部分介绍如何通过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) +); _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等等。先看看我们都定义了那些属性：说明最后跟随的是属性的对象类型。/菜单条this.MenuBar;/内容面板，所有的菜单内容都在这个上面this.ContentPane;/当前的菜单，在菜单条上显示的菜单项目this.CurrentMenu;/当前菜单面板，显示菜单项目列表的容器this.CurrentMenuBoard;/当前的菜单项目this.CurrentMenuItem;this.cellIndex=0;主要用到的方法：/增加菜单条/同时设置MenuBar和ContentPanethis.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.nex