jquery - 丰富 :jQuery within ui:composition

Question

我正在尝试在facelet组合中使用rich:faces组件rich: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 号模式的另一个例子吗？希望这能启发我......:)

Answer 1

我不确定您在提供的示例中想要做什么，但也许以下内容会有所帮助:

来自online documentation :

The rich:jQuery allows to apply styles and behaviour to DOM objects.

据我了解，查询属性包含可以为元素调用的 jQuery 函数。要在 onclick 上收到警报，您可以执行以下操作:

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

文档中的更多内容:

rich:jQuery can be used in two main modes:

1. as a one-time query applied immediately or on a document ready event
2. as a JavaScript function that can be invoked from the JavaScript code

The mode is chosen with "timing" attribute that has the following options:

1. immediate — applying a query immediately;
2. onload — applying a query when a document is loaded;
3. onJScall — applying a query by invoked JavaScript function defined with the "name" attribute.

Definition of the "name" attribute is mandatory when the value of "timing" attribute is "onJScall". If the "name" attribute is defined when "timing" value equals to "immediate" or "onload", the query is applied according to this value, but you still have an opportunity to invoke it by a function name.

The "selector" attribute defines an object or a list of objects. The query is defined with the "query" attribute.

有很多不同的方法来使用这个组件。

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

第二种模式是您希望从事件中调用 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 函数是在查询属性中定义的，当鼠标悬停在图像上时，该函数将应用于图像组件。

如果您希望在有人单击链接时调用 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 函数)回答。

我添加了两个属性“name”和“timing”，在这种模式下使用 jQuery 组件时它们是必需的。

我还在链接中添加了一个 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()});" />