PopupLayer |
||||||||||||||||||||
|
Key Features
Basic ConfigurationTo add the PopupLayer component to a page, use the <q:popupLayer> tag. As a container, the PopupLayer lets you place any kind of JSF components inside it to build its content. The display behavior of the PopupLayer component can be managed in two ways:
In the following example, when a user clicks the button, a PopupLayer component is shown. It contains text and a button, which when clicked, hides the PopupLayer. <h:form id="form1"> <input type="button" id="popupInvoker" value="Show PopupLayer" onClick="q_showPopupLayer('form1:popupLayer1');"/> <q:popupLayer id="popupLayer1"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> </h:form>
Auto-HidingThe PopupLayer component can be automatically hidden after a timeout. You can specify the timeout value in milliseconds in the hidingTimeout attribute. If the hidingTimeout attribute is "0" (default), the PopupLayer component will not be hidden automatically. The PopupLayer component can be automatically dismissed when the user clicks outside of the component. You can define this behavior by setting the closeOnOuterClick attribute to "true" (by default, it is "false"). In the example below, if the user doesn't click the Hide button, the PopupLayer is hidden in 10000 milliseconds (or 10 seconds). <q:popupLayer id="popupLayer1" hidingTimeout="10000"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> Positioning on the PageBy default, the PopupLayer's position is not defined and it is displayed as any other DHTML element with the absolute position: its placement may depend on CSS styles applied to it and/or the position on the page. You can position the PopupLayer component explicitly by specifying its left and top attributes in pixels. These attributes define the x and y coordinates of the component's upper-left corner relative to the upper-left corner of the document or an absolutely positioned immediate container of the PopupLayer component. Note that the left and top attributes should indicate the number of pixels, without the postfix "px", like shown in the following example: <q:popupLayer id="popupLayer1" left="300" top="200"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> Specifying the SizeBy default, the PopupLayer component is adjusted to accommodate its content. However, you can set fixed width and height in any units (px, mm, em, etc) by using the width and height attributes. The following example shows a fixed-sized PopupLayer component: <q:popupLayer id="popupLayer1" width="200px" height="100px"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> Setting ModalityYou can specify whether the PopupLayer component is modal or not by using the boolean modal attribute. By default, it is set to "false". When a modal PopupLayer is displayed, all other components on the page are inaccessible until the PopupLayer component is hidden. You can apply a style to the visible part of the page which is not covered by a modal PopupLayer by using the modalLayerStyle and modalLayerClass attributes. Note that this style is applied only if the modal attribute is set to "true". The following example shows a modal PopupLayer: <q:popupLayer id="popupLayer1" modal="true" modalLayerStyle="background-color:silver;"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> Note that modality is provided by covering the page by a <div> element that is placed under a modal PopupLayer. By default, this <div> has the z-index equal to 300 and a modal PopupLayer has the z-index equal to 301. While this configuration works fine in the most cases, you can tune the z-indexes using the style and modalLayerStyle attributes, if needed. Dragging SupportThe PopupLayer component supports dragging. By default, the dragging feature is turned off. You can turn it on by setting the draggable attribute to "true". The following example shows a draggable PopupLayer component: <q:popupLayer id="popupLayer1" left="300" top="200" draggable="true"> <f:verbatim> Click here to hide this PopupLayer:<br/> <input type="button" value="Hide" onclick="q_hidePopupLayer('form1:popupLayer1');"/> </f:verbatim> </q:popupLayer> Customizing StylesYou can customize a style for the PopupLayer component in the normal and rollover states using the style and styleClass and the rolloverStyle and rolloverClass attributes respectively. Client-Side EventsThe PopupLayer component supports a set of standard client-side events such as onclick, ondblclick, onmousedown, onmouseover, onmouseup, onmouseout, onmousemove, onkeydown, onkeypress, onkeyup. Note In addition, it provides a number of component-specific client-side events:
Client-Side APIAll client-side API methods are listed in the following table:
|
|||||||||||||||||||
© 2007 TeamDev Ltd. | ![]() |