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

发布于 2024-11-29 22:57:18 字数 448 浏览 0 评论 0 原文

当焦点位于文本框时，我需要在输出面板上实现（垂直滑入）显示效果。（最初，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

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长不大的小祸害 2024-12-06 22:57:18

您可以在此处找到 PrimeFaces 指南。

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

另外，对于 指定属性 layout ，其值为 "block" 以使 PrimeFaces 渲染 DIV< /code> 而不是 SPAN，因为 layout 属性的默认值为 “inline”。

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