电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Dojo 开发菜单应用（3）上下文菜单 [打印本页]

作者: look_w 时间: 2018-9-19 18:58 标题: 使用 Dojo 开发菜单应用（3）上下文菜单

上下文菜单上下文菜单是最常见的菜单，一般会结合上下文环境使用，该菜单典型的应用是右键菜单和弹出式菜单。上章节设计的菜单即为最简单的右键菜单，而稍微复杂的上下文菜单都会有键盘响应、图标效果显示、自定义快捷键、分隔符、弹出式菜单、禁用菜单项、复选式菜单项等功能：
图 3. 上下文菜单

上图所示：键盘响应指用户可以通过 Dojo 已定义的快捷键对菜单进行操作，如使用“空格键”弹出子菜单；图标效果如上述菜单的“Cut”栏剪刀图标效果所示，而自定义快捷键则如“Cut”栏对应的“Ctrl + X”快捷键；分隔符的作用如“Paste”栏下面的横线，将不同栏目组分隔开；“Paste”栏底色为灰色，即使点击也不会触发任何时间，即为禁用菜单栏功能；弹出式菜单则是菜单中最经常用到的功能，用户点击 Popup Menu 时会弹出下一级菜单；而复选菜单的效果则如“Checked”栏所示，用户可以通过点击复选框表示选中该栏或取消选择。
下面的代码实现了上述功能：
清单 3. 上下文菜单

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
47
48
49
50
51

<div dojoType="dijit.Menu" id="menu_context_3"
contextMenuForWindow="true" style="display: none;">


<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCut"
  onClick="console.log('nothing will happen,but you can implement it!')"
  accelKey="Ctrl+X">Cut</div>
<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconCopy"
  onClick="console.log('nothing will happen,but you can implement it!')"
  accelKey="Ctrl+C">Copy</div>

<div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconPaste"
  onClick="console.log('nothing will happen,but you can implement it!')"
  disabled="true" accelKey="Ctrl+V">Paste</div>
<div dojoType="dijit.MenuSeparator"></div>


<div dojoType="dijit.PopupMenuItem" id="popupMenuItem">
  <span>Popup Menu</span>
  <div dojoType="dijit.Menu" id="submenu">
<div dojoType="dijit.MenuItem" id="submenu_item1"
onClick="console.log('submenu_item1')">Submenu Item 1</div>
<div dojoType="dijit.MenuItem" id="submenu_item2"
onClick="console.log('submenu_item2')">Submenu Item 2</div>
<div dojoType="dijit.PopupMenuItem" id="submenu_item3">
<span>Deeper Popup Menu Item</span>
<div dojoType="dijit.Menu" id="submenu_item3submenu">
   <div dojoType="dijit.MenuItem"
   onClick="console.log('
   submenu_item3submenu_item1!')">Submenu Submenu Item 1</div>
   <div dojoType="dijit.MenuItem"
   onClick="console.log('
   submenu_item3submenu_item2!')">Submenu Submenu Item 2</div>
</div>
</div>
  </div>
</div>


<div dojoType="dijit.PopupMenuItem">
  <span>Different Popup</span>
  <div dojoType="dijit.ColorPalette"></div>
</div>
<div dojoType="dijit.MenuSeparator"></div>


<div dojoType="dijit.CheckedMenuItem" checked="true"
  onChange="if(arguments[0]) console.log('checked'); else console.log('unchecked');">
  Checked
</div>
</div>

下面就各个功能对上述代码进行讲解：
键盘响应键盘响应的功能是不需要开发人员实现的，Dojo 创建的 Menu 自身就已经具备了键盘响应的功能，Dojo 提供的键盘响应有：
表 1. 键盘响应功能快捷键打开上下文菜单 Windows：shift-f10 或者是在 FireFox 浏览器上右击
Macintosh： ctrl-space
Safari 4 或 Mac: VO+shift+m (VO 一般是指 control+opton 组合键 ) 遍历菜单↑、↓方向键弹出子菜单空格、回车或是→方向键关闭上下文菜单，或关闭当前子菜单返回上级菜单 Esc 或者←方向键关闭上下文菜单和所有子菜单 Tab 键
图标效果显示dijit.MenuItem 的 iconClass 属性表示了菜单项而使用的 CSS，当菜单项引入该 CSS 后，该菜单项会添加图标效果。Dojo 提供了如 dijitEditorIconCut、dijitEditorIconCopy、dijitEditorIconPaste 等图标效果的 CSS 类。
自定义快捷键dijit.MenuItem 的 accelKey 属性表示该菜单项对应的快捷键。需要特别注意的是：尽管菜单项上可以显示该快捷键文本，如上图的第一栏右边显示有“Ctrl+X”，然而当前 Dojo 版本 (1.4) 并没有提供捕捉和执行该快捷键事件的机制，即即使用户键盘输入“Ctrl+X”，也不会触发剪贴事件。
分隔符dijit.MenuSeparator 表示菜单菜单项之间的线，用于分割各个菜单项。
弹出式菜单如果想使用弹出式菜单，会需要如下的代码结构：
清单 4. 弹出式菜单

1
2
3
4
5
6
7
8

<div dojoType="dijit.PopupMenuItem" id="popupMenuItem">
<span>Popup Menu</span>
<div dojoType="dijit.Menu" id="submenu">
<div dojoType="dijit.MenuItem" id="submenu_item1">
Submenu Item 1
</div>
...
</div>

其中，PopupMenuItem 作用类似于 MenuItem，但是它可以显示下一级菜单或者其他 Widget。一般 PopupMenuItem 都会有两个子节点：显示该菜单项内容的静态文本的标签（一般是写在 span 里）和一个需要显示的 Widget，该 Widget 一般是 dijit.Menu，也可以是 dijit.ColorPalette（颜色选择框）等 Widget。
禁用菜单项dijit.MenuItem 的 disabled 属性表示该菜单项是否可用，该属性默认值为“flase”，表示可用；如果该属性为 true，则该菜单项被禁用，即使点击该菜单项也不会触发点击事件。
复选菜单项dijit.CheckedMenuItem 表示复选菜单项，其 checked 属性标识了该菜单项是否被选中。checked 属性的默认值为 false，即未被选中，每次用户点击该菜单项，就会触发选中 / 取消选中的事件，菜单项状态就会在“checked”和“unchecked”之间进行切换。用户可以定义 onchange 函数，用于处理选中 / 取消选中该菜单项事件，onchange 函数接受的第一个参数即为 checked 属性的值。
需要说明的是，以上功能并非只有在“上下文菜单”中才有，“下拉式菜单”和“静态菜单栏”都具备相同的功能，使用的方法也一样。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)