使用 Dojo 开发菜单应用（2）Dojo 菜单使用
|
- UID
- 1066743
|
使用 Dojo 开发菜单应用（2）Dojo 菜单使用
Dojo 菜单使用包括右键菜单在内，Dojo 提供了三种类型菜单：上下文菜单（右键菜单和弹出式菜单）、下拉式菜单、静态菜单。由于其他菜单使用和右键菜单使用方式基本相同，本文将从创建一个最简单的右键菜单开始讲解，然后分别介绍上述三种菜单的作用及创建方式。
简单右键菜单示例在 Dojo 支持的上下文菜单、下拉式菜单、静态菜单三类菜单中，使用最为广泛的是“上下文菜单”中的右键菜单，一个最简单的右键菜单如下图所示：
图 2. 简单右键菜单 用户在“Please Right-click On Me!”上右键单击，即可看到由 Cut、 Copy、 Paste 纵向三栏构成的右键菜单。可以看到，使用 Dojo 创建的“右键菜单”比较漂亮而且符合用户的使用习惯，下面采用“静态创建”和“动态创建”两种方式实现上述菜单：
静态创建菜单与 Dojo 静态创建其他 Widget 类似，如果希望一个实体实现菜单的效果，需要在实体的标签里面加上 dojoType=” dijit.Menu” 属性。
静态创建菜单一般需要如下完整的步骤：
- 导入所需的 JavaScript 和 CSS 文件后，导入 Dojo 所需要的 dijit.Menu 、dijit.MenuItem 等模块。
- 静态创建菜单 Widget 及菜单的各个菜单项 Widget
- 将该菜单 Widget 静态绑定到现有的 DOM 节点。
清单 1. 静态创建菜单1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <html>
<head>
<title>Menu Learn</title>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css"
</style>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="isDebug:true,parseOnLoad:true">
</script>
</head>
<body class="tundra">
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dojo.parser");
</script>
<!-- 创建菜单 Widget -->
<div dojoType="dijit.Menu" id="menu_context_1" contextMenuForWindow="false"
style="display: none;" targetNodeIds="show_context">
<div dojoType="dijit.MenuItem" >Cut</div>
<div dojoType="dijit.MenuItem" >Copy</div>
<div dojoType="dijit.MenuItem" >Paste</div>
</div>
<!-- 菜单 Widget 显示的节点 -->
<div id="show_context">Please Right-click On Me!</div>
</body>
</html>
|
dijit.Menu 是 Dojo 中菜单 Widget 的一种，可以理解为是菜单菜单项的容器，一个 dijit.Menu 通常有若干 dijit.MenuItem 组成，每一个 dijit.MenuItem 即为一条菜单项。
dijit.Menu 的 targetNodeIds 属性表示与该 Menu 绑定的目标 DOM 节点，即在该 DOM 节点上右击才会出现右键菜单。contextMenuForWindow 属性表示是否只有在窗体的任何地方右键单击才会打开菜单，如果该值为 true，用户在窗体的任何地方右击都会弹出该菜单，若该值为 false，只有在 targetNodeIds 对应的节点上右击才会弹出菜单。同时，因为右键菜单的在用户右键单击前是不显示的，因此该 Menu Widget 的 style 中 display 属性为 none。
动态创建菜单在清单 1 中，通过在一些实体的标签里面加上相应的 Dojo 标签属性实现了 Menu Widget 创建。这种静态实现 Menu Widge 的方法简单明了。然而某些情况下，需要根据一些实际情况动态的生成 Menu Widge，或者动态的修改 Menu Widget 的某些属性。下面代码就是动态实现上述简单右键菜单的方法：
清单 2. 动态创建菜单1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
| <html>
<head>
<title>Menu Learn</title>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css"
</style>
<script
type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="isDebug:true,parseOnLoad:true">
</script>
</head>
<body class="tundra">
<script language="JavaScript" type="text/javascript">
dojo.require("dijit.Menu");
dojo.require("dijit.MenuItem");
dojo.require("dojo.parser");
dojo.addOnLoad(function(){
<!-- 动态创建菜单 Widget，初始化时设置其属性 -->
var menu = new dijit.Menu({targetNodeIds:["show_context"],id:"menu_context_2"});
<!-- 创建菜单项，并添加到菜单中 -->
var item1 = new dijit.MenuItem({label:"Cut"});
var item2 = new dijit.MenuItem({label:"Copy"});
var item3 = new dijit.MenuItem({label:"Paste"});
menu.addChild(item1);
menu.addChild(item2);
menu.addChild(item3);
<!-- 调用菜单 -->
menu.startup();
}
)
</script>
<div id="show_context">Please Right-click On Me!</div>
</body>
</html>
|
可以看到，与 Dojo 动态创建普通的 Widget 类似，创建 dojo.menu 的过程也可分为三步：
- 导入所需的 JavaScript 和 CSS 文件后，导入 Dojo 所需要的 dijit.Menu、dijit.MenuItem 等模块。
- 动态创建菜单 Widget，将该菜单 Widget 动态绑定到现有的某个目标 DOM 节点。
- 启动菜单。
需要特别注意的是： 在动态创建 dijit.Menu 的时候，dijit.Menu 的 targetNodeIds 属性是一个对象数组，而非特定的对象。 |
|
|
|
|
|
