菜单栏

组件: menubar menupopup menu menuitemmenuseparator

菜单栏包括了菜单项目及子菜单项目的集合。子菜单栏包括菜单项目及其它子菜单项目的集合。因此,它们组成了一个树状菜单项目,这样用户可以选择执行。

一个使用菜单栏的例子如下,

<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>

执行一个菜单命令

菜单命令是和菜单项目相关联的。有两种方式将一个命令关联到菜单: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属性

默认情况下,弹出菜单会在被点击时打开。你可以将其改变为当鼠标移动到菜单上方时它自动打开。将autodrop属性设为true即可实现。

<menubar autodrop="true">
...
</menubar>

onOpen事件

当menupopup将要出现(或要隐藏) 时,onOpen事件会被送至menupopup用于通知。 对于更复杂的应用程序,你可以推迟menupopup 内容的创建或自动操纵内容,直到接收了onOpen事件。参考用户界面标记语言一章中随机存取一节。

更多的菜单特性

就像box,你可以使用orient属性控制菜单的方向。默认方向为horizontal

就像其它的组件,你可以自动的改变菜单,包括属性和创建子菜单。参考zkdemotest目录下的menu.zul