组件: popup 和 menupopup
。
你可以将popup或menupopup组件的ID指派给任一个XUL组件的context属性，这样，当用户右击此组件时popup或menupopup组件就会打开。
如下所示，通过将ID指派给context属性可以很容易的启动context菜单。当然，你可以为多个组件指派相同的ID。
<label value="Right Click Me!" context="editPopup"/>
<separator bar="true"/><label value="Right Click Me!" onRightClick="alert(self.value)"/>
<menupopup id="editPopup">
<menuitem label="Undo"/>
<menuitem label="Redo"/>
<menu label="Sort">
<menupopup>
<menuitem label="Sort by Name" autocheck="true"/>
<menuitem label="Sort by Date" autocheck="true"/>
</menupopup>
</menu>
</menupopup>
注意直到用户右击与其组件(通过ID关联)时menupopup才会变得可见。
[技巧]: 如果你只是想禁用浏览器默认的上下文菜单，可以为context属性指定一个并不存在的ID.
popup是一个比menupopup更通用的popup组件。你可以在popup内放置任意类型的组件。
<label value="Right Click Me!" context="any"/>
<popup id="any" width="300px">
<vbox>
It can be anything.
<toolbarbutton label="ZK" href="http://zk1.sourceforge.net"/>
</vbox>
</popup>
除了当用户右击组件时打开一个 popup，ZK也可以其它情况下打开一个popup。
|
属性 |
描述 |
|---|---|
|
|
当用户右键点击一个带有 |
|
|
当用户鼠标经过一个带有 |
|
|
当用户点击一个带有 |
例如：
<window title="Context Menu and Right Click" border="normal" width="360px">
<label value="Move Mouse Over Me!" tooltip="editPopup"/>
<separator bar="true"/>
<label value="Tooptip for Another Popup" tooltip="any"/>
<separator bar="true"/>
<label value="Click Me!" popup="editPopup"/>
<menupopup id="editPopup">
<menuitem label="Undo"/>
<menuitem label="Redo"/>
<menu label="Sort">
<menupopup>
<menuitem label="Sort by Name" autocheck="true"/>
<menuitem label="Sort by Date" autocheck="true"/>
</menupopup>
</menu>
</menupopup>
<popup id="any" width="300px">
<vbox>
ZK simply rich.
<toolbarbutton label="ZK your killer Web application now!" href="http://zk1.sourceforge.net"/>
</vbox>
</popup>
</window>
注意，你可以在popup, tooltip 和 context属性内指定任意的标识，只要它们在同一页面。换句话说，它并不限于(confine)ID空间。
当一个context menu, tooltip 或 popup 将要显示(或隐藏)时，onOpen事件会被送至ontext, tooltip 或poup menu用于通知。事件为org.zkoss.zk.ui.event.OpenEvent类的一个实例，而你可以使用getReference方法来获取致使context menu, tooltip 或 popup出现的组件。
为了提高性能，你可以推迟内容的创建直到它们变得可见，也就是，直到接收onOpen事件。
推迟创建内容的最简单方式是使用fulfill属性，如下，
<popup id="any" width="300px" fulfill="onOpen"> <button label="Hi"/><!-- whatever content --> </popup>
然后。当加载页面时，内容(Hi按钮)不会被创建。在接收到onOpen事件的第一时间，内容就会被创建。
若你喜欢在Java代码中动态的操纵内容，可以按如下描绘的方式监听onOpen事件。
<popup id="any" width="300px">
<attribute name="onOpen">
if (event.isOpen()) {
if (self.getChildren().isEmpty()) {
new Button("Hi").seParent(self);
...
}
if (event.getReference() instanceof Textbox) {
//you can do component-dependent manipulation here
...
}
}
</attribute>
</popup>