当特定输入框上有焦点时，显示带有幻灯片效果的面板 [英] Show up a panel with slide effect when there is focus on specific input box

问题描述

当重点放在文本框上时，我需要在输出面板上实现(垂直滑入)显示效果. (最初，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快照
带有Facelets的JSF 2.0

解决方案

您可以在此处.

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

选中此 JQuery文档，以了解效果的参数.

<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指定一个值为"block"的属性layout，以使PrimeFaces呈现一个DIV而不是SPAN，因为layout属性的默认值为"inline". /p>

I need to implement (vertical slide in) show effect on a output panel when there is a focus on a textbox. (Initially the outputPanel should not be visible on screen, but when there is a focus on the input box, the outputPanel must show up with a slide in effect.)

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

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

---

Using:

Primefaces 3.0 M3 Snapshot
JSF 2.0 with Facelets

解决方案

You can find the PrimeFaces guide here.

Use f:param to provide parameters to configure the animation.

Check this JQuery Docs to learn about the parameters for the effects.

<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>

Also for the <p:outputPanel specify the attribute layout with the value of "block" to make PrimeFaces render a DIV instead of SPAN because the default value for layout attribute is "inline".

这篇关于当特定输入框上有焦点时，显示带有幻灯片效果的面板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！