使用 Dojo 开发菜单应用（4）下拉式菜单

look_w

下拉式菜单下拉式菜单指的是点击某个按钮或者菜单项时，会纵向下拉弹出的菜单。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> <!-- 不会执行 onclick 事件 --> <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> <!-- 会执行 onclick 事件 --> <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!”菜单栏被单击后，则向控制台进行输出。