使用 Dojo 开发菜单应用（3）上下文菜单

look_w

上下文菜单上下文菜单是最常见的菜单，一般会结合上下文环境使用，该菜单典型的应用是右键菜单和弹出式菜单。上章节设计的菜单即为最简单的右键菜单，而稍微复杂的上下文菜单都会有键盘响应、图标效果显示、自定义快捷键、分隔符、弹出式菜单、禁用菜单项、复选式菜单项等功能：
图 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>    <!-- 弹出其他 Widget --> <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 属性的值。
需要说明的是，以上功能并非只有在“上下文菜单”中才有，“下拉式菜单”和“静态菜单栏”都具备相同的功能，使用的方法也一样。