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

标题: 使用 Dojo 开发菜单应用（5）静态菜单 [打印本页]

作者: look_w 时间: 2018-9-19 18:59 标题: 使用 Dojo 开发菜单应用（5）静态菜单

静态菜单静态菜单是静态定为到窗体某个位置的菜单，如下图所示：
图 5. 静态菜单

静态菜单与上下文菜单的显示效果是一样的，然而，静态菜单会在网页加载完后固定显示于窗体某个位置，并且不会像上下文菜单一样会因鼠标事件的发生而消失或显示，它的典型应用为作为导航菜单显示在窗体的左侧，用户可以根据其菜单项进行信息的过滤和查找。
实现上述功能菜单的代码为：
清单 6. 静态菜单

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
52
53
54
55

<div dojoType="dijit.Menu" id="navMenu">

<div dojoType="dijit.PopupMenuItem">
  <span>Africa</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Egypt</div>
<div dojoType="dijit.MenuItem">Kenya</div>
<div dojoType="dijit.MenuItem">Sudan</div>
  </div>
</div>
<div dojoType="dijit.PopupMenuItem">
  <span>Asia</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">China</div>
<div dojoType="dijit.MenuItem">India</div>
<div dojoType="dijit.MenuItem">Russia</div>
<div dojoType="dijit.MenuItem">Mongolia</div>
  </div>
</div>
<div dojoType="dijit.PopupMenuItem">
  <span>Europe</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Germany</div>
<div dojoType="dijit.MenuItem">France</div>
<div dojoType="dijit.MenuItem">Spain</div>
<div dojoType="dijit.MenuItem">Italy</div>
  </div>
</div>
<div dojoType="dijit.PopupMenuItem">
  <span>North America</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Mexico</div>
<div dojoType="dijit.MenuItem">Canada</div>
<div dojoType="dijit.MenuItem">United States of America</div>
  </div>
</div>
<div dojoType="dijit.PopupMenuItem">
  <span>South America</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">Brazil</div>
<div dojoType="dijit.MenuItem">Argentina</div>
  </div>
</div>
<div dojoType="dijit.MenuSeparator"></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>

可以看出，静态菜单的实现与上下文菜单的代码几乎是一样的，有区别的地方在于：

静态菜单的 style 中 display 取的是默认值 inline，因为它要求页面加载完就显示给用户。
静态菜单的 contextMenuForWindow 取的是默认值 false，避免用户在浏览器任意位置右键单击后重新加载该菜单。
静态菜单不需要绑定 targetNodeIds，不会因用户在特定节点右键单击后浏览器重新加载该菜单。

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