使用Dojo开发菜单应用

使用Dojo开发菜单应用2011-02-08 IBM 郝新广背景介绍

菜单应用是 Web 页面的点睛之笔。当用户在浏览器端右键单击的时候，浏览器会弹出自带的菜单，显示如“查看源代码”、“复制”、“粘贴”等可用菜单栏。通过使用浏览器自带的菜单，用户可以方便的进行复制、粘贴等操作。然而很多时候，网站开发人员会考虑禁止用户通过浏览器自带的菜单进行以上操作，或者是希望用户使用开发人员自定义菜单。一个简单的自定义菜单如下图所示：

图 1. 自定义菜单

自定义菜单的使用，可以方便用户快速定位到某个操作，增强了用户界面的交互性，提高用户体验。

Dojo 提供的菜单库，除实现了菜单的基本功能外，还加入对弹出式菜单、图标效果、键盘响应等功能的支持，方便了开发人员的菜单开发过程。本文将首先介绍 Dojo 菜单实现原理，并从创建最简单右键菜单入手，介绍右键菜单的静态和动态两种菜单创建方式，最后举例说明如何开发 Dojo 提供的上下文菜单、下拉式菜单、静态菜单三种菜单。

右键菜单实现原理

在默认状况下，用户在浏览器右键单击时，浏览器会触发 document.oncontextmemu 事件，浏览器会采用默认方式对事件进行处理，弹出浏览器自带的右键菜单。

实现自定义右键菜单的基本原理就是：菜单默认为隐藏；当 document.oncontextmemu 事件触发时，使用 JavaScript 操作菜单节点的 style 属性，显示该菜单；同时使用 JavaScript 侦听鼠标 onclick 事件，当该事件执行时，判断鼠标点击位置是否在菜单区域时，若没有，则通过操作菜单的 style 隐藏该菜单。

Dojo 实现右键菜单的方法也是采用了上面的原理，但 Dojo 封装了底层事件的处理方法，开发人员直接使用 Dojo 提供的简单 API 就能实现复杂的菜单。具体实现方式参见下文。

Dojo 菜单使用

包括右键菜单在内，Dojo 提供了三种类型菜单：上下文菜单（右键菜单和弹出式菜单）、下拉式菜单、静态菜单。由于其他菜单使用和右键菜单使用方式基本相同，本文将从创建一个最简单的右键菜单开始讲解，然后分别介绍上述三种菜单的作用及创建方式。

简单右键菜单示例

在 Dojo 支持的上下文菜单、下拉式菜单、静态菜单三类菜单中，使用最为广泛的是“上下文菜单”中的右键菜单，一个最简单的右键菜单如下图所示：

图 2. 简单右键菜单

用户在“Please Right-click On Me！”上右键单击，即可看到由 Cut、 Copy、 Paste 纵向三栏构成的右键菜单。可以看到，使用 Dojo 创建的“右键菜单”比较漂亮而且符合用户的使用习惯，下面采用“静态创建”和“动态创建”两种方式实现上述菜单：