诺蛙工作室(NowaNS)

2005-6-10 16:58:27

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

用javascript和XML创建可自由定义的菜单 by nowans(http://www.nowans.com)

第一部分定义菜单的XML数据格式

大家知道XML能够灵活的定义数据格式，并且大部分的程序设计语言以及脚本语言都能支持XML格式数据，所以这里我们使用XML来定义菜单的结构。注意在实际应用中该XML文档可以由服务器端程序生成，客户端程序或者脚本程序读取。

这样定义XML菜单数据结构可以达到不改变程序，或者尽量少的改动程序，而是通过修改或者自动生成新的XML菜单数据，来达到更新菜单的目的。

结构中主要使用了一下几个节点名称：
Menu 在菜单条上以文本显示，鼠标滑过时会出现菜单面板
SubMenu 在菜单面板上以文本＋图片的形式显示，同样的鼠标滑过时会出现菜单面板
MenuItem 在菜单面板上以文本＋图片的形式显示的菜单，点击后按照预先设定完成相关任务

所有节点均包括以下属性：
text  要显示的文本内容
icon  图标
href  链接，同样可以用来调用javascript函数
targ  链接的目标

XML文件范例：
<?xml version='1.0' encoding='gb2312'?>
<Data text="root">
<Menu text="文件" icon="images/right.gif" href="www.nowans.com" targ="_blank">
  <SubMenu text="新建" icon="images/leaf_f.gif" href="www.cnbooker.com" targ="_self">
   <MenuItem text="项目..." icon="images/home.gif" href="#" targ="_self"/>
   <MenuItem text="文件..." icon="images/note.gif" href="" 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>