如何在 JSF2 中渲染 AJAX 部件时添加 JS 效果？答案

【问题标题】：How to add JS effects on rendering AJAX parts in JSF2?如何在 JSF2 中渲染 AJAX 部件时添加 JS 效果？
【发布时间】：2010-08-23 13:39:42
【问题描述】：

在 JSF2 中，我可以通过 AJAX 更新部分视图。我假设组件树的一部分只是在服务器上生成/更新，呈现为 HTML，然后这个 HTML 被发送到客户端。然后在适当的地方插入 DOM。

这可行，但我想知道当我希望这个新的 HTML 部分出现时是否可以添加一些 jQuery（或其他 JS）效果？如果我想要它怎么办？淡入？我可以这样做吗？怎么样？

【问题讨论】：

标签： javascript jsf-2

【解决方案1】：

如果你使用 Primefaces 很容易：

http://www.primefaces.org/showcase/ui/effects.jsf

否则，您可以使用f:ajax 标记的onevent 属性，该属性接受Javascript 函数名称作为值。在 AJAX 请求期间，此函数将被调用 3 次：在函数参数的状态字段中设置 begin、complete 和 success。

查看“Java Server Faces 2.0 - The Complete Reference”的第 355 页了解更多信息。

您可以在此处查看一个工作示例：

http://www.ibm.com/developerworks/java/library/j-jsf2fu3/index.html

更新：来自 Primefaces 用户指南：

当页面第一次加载或 ajax 请求完成后，效果也可以应用于任何 JSF 组件。以下示例在 ajax 请求后以脉动效果为消息设置动画。

<p:messages id="messages"> 
    <p:effect type="pulsate" event="load"> 
        <f:param name="mode" value="'show'" /> 
    </p:effect>
</p:messages> 
<p:commandButton value="Save" actionListener="#{bean.action}" update="messages"/>

【讨论】：

Primefaces 很好，但它不是在显示后应用于组件吗？例如。通过 ajax 调用，我渲染了一些之前隐藏的组件。不是先渲染，再上效果吗？
不，因为该组件具有“事件”属性... Primefaces 用户指南中的一个示例：当页面第一次加载或加载后，效果也可以应用于任何 JSF 组件ajax 请求完成。以下示例在 ajax 请求后以脉动效果为消息设置动画。 <p:messages id=”messages”> <p:effect type=”pulsate” event=”load”> <f:param name=”mode” value=”'show'” /> </p:effect> </p:messages> <p:commandButton value=”Save” actionListener=”#{bean.action}” update=”messages”/>（抱歉格式化，评论区好像不行……）