Popup"
Tmillsclare (talk | contribs) m |
(→Popup) |
||
(20 intermediate revisions by 9 users not shown) | |||
Line 3: | Line 3: | ||
= Popup = | = Popup = | ||
− | *Demonstration: [http://www.zkoss.org/zkdemo/ | + | *Demonstration: [http://www.zkoss.org/zkdemo/popup Tooltips and Popup] |
*Java API: <javadoc>org.zkoss.zul.Popup</javadoc> | *Java API: <javadoc>org.zkoss.zul.Popup</javadoc> | ||
*JavaScript API: <javadoc directory="jsdoc">zul.wgt.Popup</javadoc> | *JavaScript API: <javadoc directory="jsdoc">zul.wgt.Popup</javadoc> | ||
+ | *Style Guide: [[ZK_Style_Guide/XUL_Component_Specification/Popup | Popup]] | ||
= Employment/Purpose = | = Employment/Purpose = | ||
− | A container | + | A container can be displayed as a popup. The popup window does not have any special frame. Popups can be displayed when an element is clicked by assigning the id of the popup to either the XulElement.setPopup(java.lang.String), XulElement.setContext(java.lang.String) or XulElement.setTooltip(java.lang.String) attribute of the element. |
− | |||
= Example = | = Example = | ||
− | [[Image: | + | [[Image:ZKComRef_Popup.PNG]] |
− | <source lang="xml" | + | <source lang="xml"> |
− | |||
<separator bar="true" /> | <separator bar="true" /> | ||
<label value="Tooptip for Another Popup" tooltip="any" /> | <label value="Tooptip for Another Popup" tooltip="any" /> | ||
− | |||
− | |||
<popup id="any" width="300px"> | <popup id="any" width="300px"> | ||
<vbox> | <vbox> | ||
Line 30: | Line 27: | ||
</popup> | </popup> | ||
</source> | </source> | ||
+ | [[Image:ZKComRef_Popup2.PNG]] | ||
+ | <source lang="xml"> | ||
+ | <textbox popup="popup, position=after_start"/> | ||
+ | <popup id="popup" width="300px"> | ||
+ | <vbox> | ||
+ | ZK simply rich. | ||
+ | <toolbarbutton label="ZK your killer Web application now!" | ||
+ | href="http://www.zkoss.org" /> | ||
+ | </vbox> | ||
+ | </popup> | ||
+ | </source> | ||
+ | |||
+ | =A Way to Specify the Position of the Popup Component= | ||
+ | The method <javadoc method="open(org.zkoss.zk.ui.Component, java.lang.String)">org.zkoss.zul.Popup</javadoc> is used to specify the position of a popup component. The function's second argument takes a relative position, a list of 14 possible positions are provided below. | ||
+ | |||
+ | [[Image:ZKComRef_Popup_Position.png]] | ||
+ | |||
+ | |||
+ | |||
+ | since 6.0.1 | ||
+ | As of 6.0.1, we provided more options for Popup position: | ||
+ | [[Image:ZKComRef_Popup_Position_601.png]] | ||
+ | |||
+ | overlap, overlap_end, overlap_before, overlap_after are kept (still available) for backward compatibility. They are identical with top_left, top_right, bottom_left and bottom_right, respectively. | ||
+ | |||
+ | The following illustrates the simplicity of usage, | ||
+ | |||
+ | <source lang="xml" high="4"> | ||
+ | <popup id="pp"> | ||
+ | Here is popup | ||
+ | </popup> | ||
+ | <button label="before_start" onClick='pp.open(self, "before_start");' /> | ||
+ | </source> | ||
+ | |||
+ | Upon clicking the button the popup component will appear in the relative position specified. In this case the position is just above the button. | ||
+ | |||
+ | [[Image:ZKComRef_Popup_Beforestart.png]] | ||
+ | |||
+ | Or specify these positions using the following code. | ||
+ | <source lang="xml"> | ||
+ | <button id="btn" label="overlap" width="300px" height="300px" popup="component_id, position=overlap_end"/></source> | ||
+ | In addition to this more options are available such as positioning by x and y co-ordinates as demonstrated below. | ||
− | =Supported | + | <source lang="xml"> |
+ | <button id="btn" label="overlap" width="300px" height="300px" popup="component_id, x=50,y=50"/></source> | ||
+ | |||
+ | == Toggle Popup == | ||
+ | |||
+ | Since 7.0.0 | ||
+ | If a popup/context menu is assigned to a target component via the popup/context attribute, the popup up will show up when the user clicks on the target component. Click the target component again, the popup will still show up by default. As of 7.0.0, The popup/context attribute supports additional toggle type, which could make target component act as a toggle switcher. If the popup has not shown up yet, click the target component will cause the popup to show up. If the popup is showing up, click on the target component again will toggle the popup to hide. The usage is in below code. | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <button label="Popup" popup="id, type=toggle"/></source> | ||
+ | |||
+ | == Tooltip Delay== | ||
+ | |||
+ | The tooltip attribute can also support a delay, the following code outlines how to accomplish this. | ||
+ | |||
+ | <source lang="xml"> | ||
+ | <label label="Tooltip" tootlip="id, position=before_start, delay=500"/></source> | ||
+ | |||
+ | =Supported Events= | ||
{| border="1" | width="100%" | {| border="1" | width="100%" | ||
Line 39: | Line 96: | ||
! <center>Event Type</center> | ! <center>Event Type</center> | ||
|- | |- | ||
− | | | + | |- |
− | | | + | | <center><tt>onOpen</tt></center> |
+ | | '''Event:''' <javadoc>org.zkoss.zk.ui.event.OpenEvent</javadoc> | ||
+ | Denotes a Popup has been opened or '''closed''' (in this case OpenEvent::isOpen() returns false). | ||
|} | |} | ||
+ | *Inherited Supported Events: [[ZK_Component_Reference/Base_Components/XulElement#Supported_Events | XulElement]] | ||
=Supported Children= | =Supported Children= | ||
Line 47: | Line 107: | ||
*ALL | *ALL | ||
− | =Use | + | =Use Cases= |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
Line 54: | Line 114: | ||
| 3.6 | | 3.6 | ||
| Smalltalk: Toolbar and Menus | | Smalltalk: Toolbar and Menus | ||
− | | [ | + | | [[ZK Developer's Reference/UI Patterns/Tooltips, Context Menus and Popups|ZK Developer's Reference: Tooltips, Context Menus and Popups]] |
|- | |- | ||
| 3.6 | | 3.6 | ||
| A way to specify the position of the Popup component | | A way to specify the position of the Popup component | ||
− | | [ | + | | [[Small_Talks/2009/April/New_Features_of_ZK_3.6.1#A_way_to_specify_the_position_of_the_Popup_component A way to specify the position of the Popup component|New Features of ZK 3.6.1]] |
|- | |- | ||
| 3.6 | | 3.6 | ||
| Popup, tooltip and context positions | | Popup, tooltip and context positions | ||
− | | [ | + | | [[Small_Talks/2009/November/New_Features_of_ZK_3.6.3#Popup.2C_tooltip_and_context_positions Popup, tooltip and context positions|New Features of ZK 3.6.3]] |
|} | |} | ||
=Version History= | =Version History= | ||
− | + | {{LastUpdated}} | |
{| border='1px' | width="100%" | {| border='1px' | width="100%" | ||
! Version !! Date !! Content | ! Version !! Date !! Content | ||
|- | |- | ||
− | | | + | | 7.0.0 |
− | | | + | | Nov 2013 |
− | | | + | | Popup support toggle type |
|} | |} | ||
{{ZKComponentReferencePageFooter}} | {{ZKComponentReferencePageFooter}} |
Revision as of 06:56, 16 December 2014
Popup
- Demonstration: Tooltips and Popup
- Java API: Popup
- JavaScript API: Popup
- Style Guide: Popup
Employment/Purpose
A container can be displayed as a popup. The popup window does not have any special frame. Popups can be displayed when an element is clicked by assigning the id of the popup to either the XulElement.setPopup(java.lang.String), XulElement.setContext(java.lang.String) or XulElement.setTooltip(java.lang.String) attribute of the element.
Example
<separator bar="true" />
<label value="Tooptip for Another Popup" tooltip="any" />
<popup id="any" width="300px">
<vbox>
ZK simply rich.
<toolbarbutton label="ZK your killer Web application now!"
href="http://www.zkoss.org" />
</vbox>
</popup>
<textbox popup="popup, position=after_start"/>
<popup id="popup" width="300px">
<vbox>
ZK simply rich.
<toolbarbutton label="ZK your killer Web application now!"
href="http://www.zkoss.org" />
</vbox>
</popup>
A Way to Specify the Position of the Popup Component
The method Popup.open(Component, String) is used to specify the position of a popup component. The function's second argument takes a relative position, a list of 14 possible positions are provided below.
since 6.0.1
As of 6.0.1, we provided more options for Popup position:
overlap, overlap_end, overlap_before, overlap_after are kept (still available) for backward compatibility. They are identical with top_left, top_right, bottom_left and bottom_right, respectively.
The following illustrates the simplicity of usage,
<popup id="pp">
Here is popup
</popup>
<button label="before_start" onClick='pp.open(self, "before_start");' />
Upon clicking the button the popup component will appear in the relative position specified. In this case the position is just above the button.
Or specify these positions using the following code.
<button id="btn" label="overlap" width="300px" height="300px" popup="component_id, position=overlap_end"/>
In addition to this more options are available such as positioning by x and y co-ordinates as demonstrated below.
<button id="btn" label="overlap" width="300px" height="300px" popup="component_id, x=50,y=50"/>
Toggle Popup
Since 7.0.0
If a popup/context menu is assigned to a target component via the popup/context attribute, the popup up will show up when the user clicks on the target component. Click the target component again, the popup will still show up by default. As of 7.0.0, The popup/context attribute supports additional toggle type, which could make target component act as a toggle switcher. If the popup has not shown up yet, click the target component will cause the popup to show up. If the popup is showing up, click on the target component again will toggle the popup to hide. The usage is in below code.
<button label="Popup" popup="id, type=toggle"/>
Tooltip Delay
The tooltip attribute can also support a delay, the following code outlines how to accomplish this.
<label label="Tooltip" tootlip="id, position=before_start, delay=500"/>
Supported Events
Event: OpenEvent
Denotes a Popup has been opened or closed (in this case OpenEvent::isOpen() returns false). |
- Inherited Supported Events: XulElement
Supported Children
*ALL
Use Cases
Version | Description | Example Location |
---|---|---|
3.6 | Smalltalk: Toolbar and Menus | ZK Developer's Reference: Tooltips, Context Menus and Popups |
3.6 | A way to specify the position of the Popup component | New Features of ZK 3.6.1 |
3.6 | Popup, tooltip and context positions | New Features of ZK 3.6.3 |
Version History
Version | Date | Content |
---|---|---|
7.0.0 | Nov 2013 | Popup support toggle type |