当焦点在特定输入框上时，显示具有幻灯片效果的面板

Question

当需要关注文本框时，我需要在输出面板上实现（垂直滑入）显示效果。 （最初，outputPanel不应在屏幕上可见，但是当输入框上有焦点时，outputPanel必须显示有效的幻灯片。）

    <p:inputTextarea>
        <p:effect event="focus" for="inputPanel" type="slide"/>
    </p:inputTextarea>

    <p:outputPanel id="inputPanel" style="display: none;" >
        ......
    </p:outputPanel>

---

使用：

Primefaces 3.0 M3 Snapshot
带Facelets的JSF 2.0

Answer 1

您可以找到PrimeFaces指南here。

使用f:param提供配置动画的参数。

选中此JQuery Docs以了解效果的参数。

<p:inputTextarea>
    <p:effect event="focus" for="inputPanel" type="slide">
        <f:param name="mode" value="'show'" />
        <f:param name="direction" value="'up'" />
    </p:effect>
    <p:effect event="blur" for="inputPanel" type="slide">
        <f:param name="mode" value="'hide'" />
        <f:param name="direction" value="'up'" />
    </p:effect>
</p:inputTextarea>

<p:outputPanel id="inputPanel" layout="block" style="width: 400px; height: 200px; display: none;">
    <p:panel header="Panel inside OutputPanel" >
        <h1>Applying effect on output-panel.</h1>
    </p:panel>
</p:outputPanel>

同样，<p:outputPanel指定属性layout，其值为"block"，以使PrimeFaces呈现DIV而不是SPAN，因为默认值为layout属性为"inline"。