如何在JSF2中为渲染AJAX部件添加JS效果? [英] How to add JS effects on rendering AJAX parts in JSF2?

查看:65
本文介绍了如何在JSF2中为渲染AJAX部件添加JS效果?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

In JSF2, I can update part of view by AJAX. I assume part of components tree is just generated/updated on server, rendered to HTML and this HTML is sent to client. Then inserted into DOM where appropriate.

这可行,但是我想在我希望出现这个新的HTML部分时是否可以添加一些jQuery(或其他JS)效果?如果我想要例如淡入淡出?我可以这样做吗?怎么样?

This works, but I wonder if I could add some jQuery (or other JS) effect when I want this new HTML part to appear? What if I want it e.g. to fade in? Can I do this? How?

推荐答案

使用Primefaces很容易:

It's easy if you use Primefaces:

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

否则,您可以使用f:ajax标记的onevent属性,该属性接受Java语言函数名称作为值.在AJAX请求期间,将调用该函数三次:在函数参数的状态字段中设置begincompletesuccess.

Otherwise you could use the onevent attribute of the f:ajax tag, which accepts a Javascript function name as the value. This function will be called three times during an AJAX request: with begin, complete and success set in the function parameter's status field.

请查看"Java Server Faces 2.0-完整参考"的第355页以获取更多信息.

Check page 355 of "Java Server Faces 2.0 - The Complete Reference" for further info.

您可以在此处看到一个有效的示例:

You can see a working example here:

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

更新:来自Primefaces用户指南:

UPDATE: From the Primefaces users guide:

在第一次加载页面时或在ajax请求完成之后,效果也可以应用于任何JSF组件.下面的示例在ajax请求后对具有脉冲效果的消息进行动画处理.

Effects can also be applied to any JSF component when page is loaded for the first time or after an ajax request is completed. Following example animates messages with pulsate effect after ajax request.

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

这篇关于如何在JSF2中为渲染AJAX部件添加JS效果?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆