PrimeFaces Extensions Showcase

BlockUI

This example demonstrates a non-centered message defined by the css and centerX / centerY attributes. Furthermore, you can use the cssOverlay attribute to style the overlay (half-transparent mask).

The timeout attribute is helpful for auto-unblocking. It defines time in millis to wait before auto-unblocking.

Source

XHTML page


<p:commandButton value="Block this page!" type="button"
                 onclick="PF('blockUIWidget').block()"/>

<pe:blockUI widgetVar="blockUIWidget"
            css="{top: '10px', left: '', right: '10px', cursor: 'wait'}"
            cssOverlay="{backgroundColor: 'red'}"
            timeout="2000"
            centerY="false">
    <h:panelGrid columns="2">
        <h:graphicImage library="images" name="ajax-loader1.gif"
                        style="margin-right: 12px; vertical-align: middle;"/>
        <h:outputText value="This is a non-centered message. Please wait..." style="white-space: nowrap;"/>
    </h:panelGrid>
</pe:blockUI>

Use Cases

Documentation pe:

Attributes (move mouse over the names to see data types)

Name	Description
No attributes available for this component.