用XML和XSLT进行高级的Web UI设计（二）

编译:alpha2002

定制目录树的上下文菜单

本文要求读者熟悉JScript，MSXML，XSL/XSLT，DOM。

下载例子代码

这是系列文章的第二篇，主要介绍如何在目录树中创建上下文菜单。本文中所使用的目录树结构就是我们在前面第一篇文章中所创建的目录树结构。在它的基础上引入上下文菜单特性。

在Windows应用程序中，窗口对象的上下文菜单无处不在，只要将鼠标指针移到某个应用程序的窗口对象上，然后单击右键就可以弹出该对象的上下文菜单。对于不同的应用程序，以及同一个应用程序中不同的窗口对象来说，其上下文菜单是不一样的。早期的IE浏览器没有让开发人员创建对象上下文菜单的能力。自从引入的文档对象模型（DOM）之后。使得开发人员在Web应用程序中创建上下文菜单成为可能。

本文将示范如何用XML和XSLT针对特定对象创建定制的上下文菜单，并且菜单的级数是没有限制的。其建立机制与树型目录的建立一样，通过特定的XSL风格页将定义好的目录树XML文件转换成满足要求的HTML推送给客户端浏览器（IE5.5+）显示。客户端负责处理所有对菜单的导航操作。

Windows中的上下文菜单可以适用于任何Web页面对象。本文所创建的菜单是针对我们在上一篇文章中所创建的目录树增加的新UI特性。

在上一篇文章里，我们曾提到过只要在描述目录树结构的XML文件的entity元素中加入一个 "oncontextmenu" 元素，然后在这个元素里请求一个定制的XML上下文菜单描述文件。便可以轻松实现目录树的上下文菜单。菜单的源代码可以从本文的链接下载。

图一 目录树上下文菜单运行例子

描述上下文菜单结构的XML 文件

与描述目录树结构的XML文件类似，这里所选则的上下文菜单格式能很好地适用于XSLT进行递归处理，从而满足和实现层次无限的上下文菜单的需要。

上下文菜单结构的XML文档有一个根元素"menu"，此根元素下包含一个元素"entity"。然后在"entity"元素中定义"contents"子元素，整个上下文菜单的结构是通过在每一层entity元素的"contents"子元素中嵌套的entity元素来实现的。下面是"entity"元素中包含的关键所有元素或属性的清单。

名称

类型

描述

id

属性

上下文菜单或菜单选项的id号，唯一标示

description

元素

描述菜单或菜单选项的说明文本

onClick

元素

客户端触发onClick事件的函数名

image

元素

表示菜单选项的图像

contents

元素

包含entity子元素，其内容用以确定嵌套的entity元素是否有上下文子菜单