Mirage LIVE PREVIEW

Effect

Effect is attached to a particular event of a target.

Documentation

Catalog

Blind
click
Clip
click
Drop
click
Explode
click
Fold
doubleclick
Puff
doubleclick
Slide
doubleclick
Scale
doubleclick
Bounce
click
Pulsate
click
Shake
click
Size
click

Target

On Load

Message Effects
<h3 style="margin-top:0">Catalog</h3>
<h:panelGrid columns="4" cellpadding="5">
    <p:panel id="blind" header="Blind">
        <h:outputText value="click" />
        <p:effect type="blind" event="click">
            <f:param name="direction" value="'horizontal'" />
        </p:effect>
    </p:panel>

    <p:panel id="clip" header="Clip">
        <h:outputText value="click" />
        <p:effect type="clip" event="click" />
    </p:panel>

    <p:panel id="drop" header="Drop">
        <h:outputText value="click" />
        <p:effect type="drop" event="click" />
    </p:panel>

    <p:panel id="explode" header="Explode">
        <h:outputText value="click" />
        <p:effect type="explode" event="click" />
    </p:panel>

    <p:panel id="fold" header="Fold">
        <h:outputText value="doubleclick" />
        <p:effect type="fold" event="dblclick" />
    </p:panel>

    <p:panel id="puff" header="Puff">
        <h:outputText value="doubleclick" />
        <p:effect type="puff" event="dblclick" />
    </p:panel>

    <p:panel id="slide" header="Slide">
        <h:outputText value="doubleclick" />
        <p:effect type="slide" event="dblclick" />
    </p:panel>

    <p:panel id="scale" header="Scale">
        <h:outputText value="doubleclick" />
        <p:effect type="scale" event="dblclick">
            <f:param name="percent" value="90" />
        </p:effect>
    </p:panel>

    <p:panel id="bounce" header="Bounce">
        <h:outputText value="click" />
        <p:effect type="bounce" event="click" />
    </p:panel>

    <p:panel id="pulsate" header="Pulsate">
        <h:outputText value="click" />
        <p:effect type="pulsate" event="click" />
    </p:panel>

    <p:panel id="shake" header="Shake">
        <h:outputText value="click" />
        <p:effect type="shake" event="click" />
    </p:panel>

    <p:panel id="size" header="Size">
        <h:outputText value="click" />
        <p:effect type="size" event="click">
            <f:param name="to" value="{width: 200,height: 60}" />
        </p:effect>
    </p:panel>
</h:panelGrid>

<h3>Target</h3>
<p:commandButton type="button" value="Show" style="display:block" icon="pi pi-image">
    <p:effect type="puff" event="click" for="img">
        <f:param name="mode" value="'show'" />
    </p:effect>
</p:commandButton>
<p:graphicImage id="img" name="demo/images/nature/nature1.jpg" style="display:none"/>

<h:form>
    <h3>On Load</h3>
    <p:messages id="messages" closable="true">
        <p:effect type="pulsate" event="load" delay="500" />
    </p:messages>

    <p:panel id="panel" header="Message Effects" toggleable="true">
        <h:panelGrid columns="2" cellpadding="5">
            <p:outputLabel for="text" value="Type:" />
            <p:inputText id="text" value="#{effectView.text}" required="true" />

            <h:outputText />
            <p:commandButton id="submit" value="Echo" action="#{effectView.echo}" update="messages"/>
        </h:panelGrid>
    </p:panel>
</h:form>