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

标题: 使用 Dojo 开发菜单应用（4）下拉式菜单 [打印本页]

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

下拉式菜单下拉式菜单指的是点击某个按钮或者菜单项时，会纵向下拉弹出的菜单。Dojo 提供的下拉式菜单一般会绑定到 dijit.form.ComboButton，dijit.form.DropDownButton 或 dijit.MenuBar Widget 上，点击这些 Widget 或 Widget 的菜单项时，会弹出下拉式菜单。以 dijit.MenuBar 为例：MenuBar Widget 是经常用到的 Widget，它模拟实现了一个典型的菜单条，横向列出若干菜单选项，当点击某个菜单项时，会下拉弹出子菜单或其他 Widget。如下图所示：
图 4. 下拉式菜单

上述功能可由清单 5 实现：
清单 5. 下拉式菜单

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

<div id="menubar" dojoType="dijit.MenuBar">

<div dojoType="dijit.PopupMenuBarItem" id="file">
  <span>File</span>
  
  <div dojoType="dijit.Menu" id="fileMenu">
<div dojoType="dijit.MenuItem" id="new">New</div>
<div dojoType="dijit.MenuItem" id="open">Open</div>
<div dojoType="dijit.MenuSeparator" id="separator"></div>
<div dojoType="dijit.MenuItem" id="save" iconClass="dijitEditorIconSave">Save</div>
<div dojoType="dijit.PopupMenuItem" id="saveas">
<span>Save as</span>
<div dojoType="dijit.Menu" id="subMenu">
   <div dojoType="dijit.MenuItem">*.txt</div>
   <div dojoType="dijit.MenuItem">*.doc</div>
</div>
</div>
  </div>
</div>
<div dojoType="dijit.PopupMenuBarItem" id="edit">
  <span>Edit</span>
  <div dojoType="dijit.Menu" id="editMenu">
<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>
</div>
<div dojoType="dijit.PopupMenuBarItem" disabled="true">
  <span>Disabled</span>
  <div dojoType="dijit.Menu">
<div dojoType="dijit.MenuItem">If you see this,there is something wrong!</div>
  </div>
</div>

<div dojoType="dijit.PopupMenuBarItem"
  onclick="console.log('no submenu,menu donot has any item,handle onclick event?');">
  <span>Empty</span>
  <div dojoType="dijit.Menu">
  </div>
</div>

<div dojoType="dijit.MenuBarItem"
  onclick="console.log('no submenu,I am MenuBarItem,handle onclick event?'); ">
  Please!
</div>
</div>

一个 dijit.MenuBar Widget 由多个 dijit.PopupMenuBarItem 或 dijit.MenuBarItem Widget 组成：

示例的“File”菜单项就是由 dijit.PopupMenuBarItem Widget 实现的，当鼠标点击该菜单项时，菜单项会弹出一个子菜单或其他 Widget。同上下文菜单的 dijit.PopupMenuItem 类似，一个 dijit.PopupMenuBarItem Widget 会包含两个子节点：显示静态文本的标签（一般是写在 span 里）和一个需要显示的 Widget，该 Widget 一般是 digit.Menu Widget。
dijit.MenuBarItem 也是菜单条的菜单项，它不支持下拉弹出 digit.Menu 或其他 Widget。与 dijit.PopupMenuBarItem 不同，当在该 dijit.MenuBarItem Widget 单击时，会触发 onclick 函数，这点可以通过“Empty”和“Please!”菜单项得到验证：

当点击“Empty”和“Please!”菜单项时，都不会弹出下拉菜单，两者显示效果看起来一样，但实际触发的事件却不同，观察 firebug 控制台，可以发现：“Empty”菜单栏被单击后，并没有向控制台进行输出，即并没有真正执行 onclick 函数；而“Please!”菜单栏被单击后，则向控制台进行输出。

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