Question

我正在尝试使用富：faces组件丰富：在facelet组合中的jQuery .. 但是我无法产生任何jquery调用。

<ui:composition xmlns="http://www.w3.org/1999/xhtml"

<ui:define name="body"> 
<h:form id="f"><h:commandLink value="Go" id="ex"/>
            <rich:jQuery selector="ex" query="alert('aw')"></rich:jQuery>

另一个问题......我将如何重写这个以降低数字1模式。这是立即应用的一次性查询或文档就绪事件。对不起，但我很困惑......你能给出1号模式的另一个例子吗？希望这会启发我...... :)

Answer 1

我不确定您从您提供的示例中尝试做什么，但可能以下内容会有所帮助：

来自online documentation：

富：jQuery允许将样式和行为应用于DOM对象。

据我所知，query属性包含可以为元素调用的jQuery函数。要在您的onclick上发出警报，您可以执行以下操作：

<h:commandLink value="AW1" id="x1"/>
<rich:jQuery selector="#x1" query="click(function(){alert('test')});" />

更多来自文档：

rich：jQuery可以在两种主要模式中使用：


作为立即应用的一次性查询或文档就绪事件

作为可以从JavaScript代码调用的JavaScript函数

使用具有以下内容的“timing”属性选择模式   选项：


立即 - 立即应用查询;

onload - 在加载文档时应用查询;

onJScall - 通过调用应用查询   使用“name”属性定义的JavaScript函数。

当“timing”属性的值时，“name”属性的定义是必需的   是“onJScall”。如果在“计时”值时定义了“name”属性   等于“立即”或“onload”，查询将根据应用   这个值，但你仍然有机会通过a来调用它   功能名称。

“selector”属性定义对象或对象列表。该   query使用“query”属性定义。

使用此组件有很多种不同的方法。

第一种模式是立即应用的一次性查询或文档就绪事件。在线文档中有一些示例。

第二种模式是您希望从事件中调用JS函数，例如从文档中获取：

<h:graphicImage width="50" value="/images/warning.png" onmouseover="enlargePic(this, {pwidth:'60px'})" onmouseout="releasePic(this)"  />
<rich:jQuery name="enlargePic" timing="onJScall" query="animate({width:param.pwidth})" />
<rich:jQuery name="releasePic" timing="onJScall" query="animate({width:'50px'})"/>

正如您所看到的，jQuery animate函数在query属性中定义，并在鼠标悬停在图像上时应用于图像组件。

如果您希望在有人点击链接时调用JS函数，那么您不必使用rich：jquery组件，并且仍然在javascript代码中使用jQuery。 JQuery附带了RichFaces。如果您使用RF 3.3.3，则必须在无冲突模式下使用jQuery：http://docs.jquery.com/Using_jQuery_with_Other_Libraries

最后看看这个组件的现场演示：

http://livedemo.exadel.com/richfaces-demo/richfaces/jQuery.jsf;jsessionid=BD9D90829B8C4A9E230203856497FC9C?c=jQuery&tab=usage

<强>更新

根据您在其中一个答案中提供的示例，请参阅下面的说明：

<h:commandLink value="AW" id="x" onclick="testaw(this);return false;"/>
<rich:jQuery name="testaw" timing="onJScall"  query="stop().fadeOut('slow')"/>

您会注意到我删除了选择器和事件属性，因为您尝试执行的示例将属于我原来提到的第二种模式（作为可以从JavaScript代码调用的JavaScript函数）回答。

我添加了在此模式下使用jQuery组件时必须使用的两个属性“name”和“timing”。

我还在链接中添加了一个onclick事件（并确保返回false，因为此组件将尝试提交表单，如果发生这种情况，您将看不到jquery效果）。

更新2

以下要求是一个基于您的示例的工作示例，用作在页面加载时应用的一次性查询：

<h:commandLink value="AW2" id="x2"/>
<rich:jQuery selector="#x2" timing="onload" query="stop().fadeOut('slow')" />

另一个例子是：

<h:commandLink value="AW3" id="x3"/>
<rich:jQuery selector="#x3" query="click(function(){jQuery(this).stop().fadeOut('slow')})" />

以上问题是表单被提交。我试过这个认为它会起作用，但事实并非如此：

<h:commandLink value="AW3" id="x3"/>
<rich:jQuery selector="#x3" query="click(function(e){jQuery(this).stop().fadeOut('slow');e.preventDefault()});" />

rich：uQuery中的jQuery：组合

1 个答案: