Ajax Core

Input

Button

Button CommandButton CommandLink SplitButton

Data

Panel

Overlay

Menu

Charts

Message

Growl Messages

Multimedia

File

DragDrop

Draggable DataGrid DataTable
Football Native

Dialog Framework

Basic Data

Misc

Overlay Panel

OverlayPanel is a generic container component that can overlay other components on page. Notable features are custom positioning, configurable events and effects. Lazy content loading to reduce page load time is also supported via dynamic option, when enabled overlayPanel will load the contents just before being shown.





Source

<h:form id="form">
                
    <p:commandButton id="chartBtn" value="Basic" type="button" />

    <p:overlayPanel id="chartPanel" for="chartBtn" hideEffect="fade">
        <p:pieChart id="chart" value="#{chartBean.pieModel}" legendPosition="w"
            title="Sample Pie Chart" style="width:300px;height:200px" />
    </p:overlayPanel>

    <p:commandButton id="carBtn" value="Dynamic" type="button" />

    <p:overlayPanel id="carPanel" for="carBtn" hideEffect="fade" dynamic="true">
        <p:dataTable id="table" var="car" value="#{tableBean.cars}" rows="10" paginator="true">
            <p:column headerText="Model">
                <h:outputText value="#{car.model}" />
            </p:column>

            <p:column headerText="Year">
                <h:outputText value="#{car.year}" />
            </p:column>

            <p:column headerText="Manufacturer">
                <h:outputText value="#{car.manufacturer}" />
            </p:column>

            <p:column headerText="Color">
                <h:outputText value="#{car.color}" />
            </p:column>
        </p:dataTable>
    </p:overlayPanel>

    <p:graphicImage id="img" value="../images/images.png" style="cursor:pointer" title="Custom Options"/>

    <p:overlayPanel id="imgPanel" for="img" showEffect="blind" hideEffect="explode" showEvent="mouseover" hideEvent="mousedown"
                dismissable="false" showCloseIcon="true">
        <p:imageSwitch id="imgSwitch" effect="fade" style="width:300px;height:188px;">
            <ui:repeat value="#{imageSwitchBean.images}" var="image">
                <p:graphicImage value="/images/#{image}" width="300"/>
            </ui:repeat>
        </p:imageSwitch>
    </p:overlayPanel>
</h:form>