组件: menubar
,
menupopup
,
menu
,
menuitem
和 menuseparator
。
菜单栏包括了菜单项目及子菜单项目的集合。子菜单栏包括菜单项目及其它子菜单项目的集合。因此,它们组成了一个树状菜单项目,这样用户可以选择执行。
一个使用菜单栏的例子如下,
<menubar> <menu label="File"> <menupopup> <menuitem label="New"/> <menuitem label="Open"/> <menuseparator/> <menuitem label="Exit"/> </menupopup> </menu> <menu label="Help"> <menupopup> <menuitem label="Index"/> <menu label="About"> <menupopup> <menuitem label="About ZK"/> <menuitem label="About Potix"/> </menupopup> </menu> </menupopup> </menu> </menubar>
menubar
: 菜单项目(menuitem
)和菜单(menu
)集合的最顶层容器。
menu
: 弹出(popup)菜单的容器,menu
定义了一个用于显示的标签(the label to be displayed at part of its parent)。当用户点击标签时,弹出菜单就会出现。
menupopup
: 一个菜单项目(menuitem
)和菜单(menu
)集合的容器。同时它为menu
的一个子组件并且当menu
的标签被点击时它就会出现。
menuitem
: menu的私有命令(individual command)。可以被放置在 a menu bar或弹出菜单内。
menuseparator
: 一个菜单内的分割栏。需要放置在弹出菜单内。
菜单命令是和菜单项目相关联的。有两种方式将一个命令关联到菜单:onClick
事件及href
属性。如果添加一个事件监听器到菜单项目的onClick
事件,当此项目被点击时监听器就会被调用。
<menuitem onClick="draft.save()"/>
另外,你可以为href
属性指定一个超链接,则当用户点击菜单项目时会转向指定的URL。
<menuitem href="/edit"/> <menuitem href="http://zk1.sourceforge.net"/>
若事件监听器和href
属性都被指定了,则都会执行。但是,当事件监听器在服务器开始执行时,浏览器或许已经将当前的URL转向了指定的链接。因此,所有由事件监听器产生的响应都会被忽略。
菜单项目可以像复选框一样使用。checked
属性表示此菜单项目是否被选中。若选中,一个选中图标就会出现在菜单项目的前面。
除了编程使用checked
属性,你还可以将autocheck
属性设为true
,这样当用户点击此菜单项目时checked
属性就会被自动切换(toggled)。
<menuitem label="" autocheck="true"/>
默认情况下,弹出菜单会在被点击时打开。你可以将其改变为当鼠标移动到菜单上方时它自动打开。将autodrop
属性设为true即可实现。
<menubar autodrop="true"> ... </menubar>
当menupopup将要出现(或要隐藏) 时,onOpen
事件会被送至menupopup用于通知。 对于更复杂的应用程序,你可以推迟menupopup 内容的创建或自动操纵内容,直到接收了onOpen
事件。参考用户界面标记语言一章中随机存取一节。