[richfaces-svn-commits] JBoss Rich Faces SVN: r18530 - in branches/development/docs/Component_Reference/src/main/docbook/en-US: extras and 1 other directory.
richfaces-svn-commits at lists.jboss.org
richfaces-svn-commits at lists.jboss.org
Tue Aug 10 03:16:03 EDT 2010
Author: SeanRogers
Date: 2010-08-10 03:16:02 -0400 (Tue, 10 Aug 2010)
New Revision: 18530
Added:
branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample
branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample
Modified:
branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml
Log:
Updated rich:jQuery
Modified: branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml
===================================================================
--- branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml 2010-08-09 23:44:47 UTC (rev 18529)
+++ branches/development/docs/Component_Reference/src/main/docbook/en-US/chap-Component_Reference-Layout_and_appearance.xml 2010-08-10 07:16:02 UTC (rev 18530)
@@ -57,9 +57,133 @@
The <sgmltag><rich:jQuery></sgmltag> component applies styles and custom behavior to both <acronym>JSF</acronym> (JavaServer Faces) objects and regular <acronym>DOM</acronym> (Document Object Model) objects. It uses the <phrase>jQuery</phrase> JavaScript framework to add functionality without conflicting with the <filename>prototype.js</filename> library.
</para>
<para>
- The query triggered by the <sgmltag><rich:jQuery></sgmltag> component is specified using the <varname>query</varname> attribute. Any objects or lists of objects used in the query are specified using the <varname>selector</varname> attribute. The <varname>selector</varname> attribute uses syntax defined by the <orgname>World Wide Web Consortium (<acronym>W3C</acronym>)</orgname> for the <acronym>CSS</acronym> rule selector.
+ The query triggered by the <sgmltag><rich:jQuery></sgmltag> component is specified using the <varname>query</varname> attribute.
</para>
<para>
+ Any objects or lists of objects used in the query are specified using the <varname>selector</varname> attribute. The <varname>selector</varname> attribute references objects using the following method:
+ </para>
+ <itemizedlist>
+ <listitem>
+ <para>
+ The <varname>selector</varname> attribute can refer to the <varname>id</varname> attribute of any JSF component or client.
+ </para>
+ </listitem>
+ <listitem>
+ <para>
+ If the <varname>selector</varname> attribute does not match the <varname>id</varname> attribute of any JSF components or clients on the page, it instead uses syntax defined by the <orgname>World Wide Web Consortium (<acronym>W3C</acronym>)</orgname> for the <acronym>CSS</acronym> rule selector. <xref linkend="exam-Component_Reference-richjQuery-Example_selector_values" /> shows a list of examples of the selector syntax. Refer to the syntax specification at <ulink url="http://www.w3.org/TR/CSS2/selector.html">http://www.w3.org/TR/CSS2/selector.html</ulink> for full details.
+ </para>
+ <example id="exam-Component_Reference-richjQuery-Example_selector_values">
+ <title>Example selector values</title>
+ <variablelist>
+ <varlistentry>
+ <term><code>p[a]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements which contain an <sgmltag><a></sgmltag> element are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p.foo[a]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements of class <literal>foo</literal> which contain an <sgmltag><a></sgmltag> element are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p#secret</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements with an <literal>id</literal> identifier of <literal>secret</literal> are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>ul/li</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><li></sgmltag> elements contained in <sgmltag><ul></sgmltag> elements are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>input[@name=bar]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><input></sgmltag> elements with a <varname>name</varname> attribute whose value is <literal>bar</literal> are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>input[@type=radio][@checked]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><input></sgmltag> elements with both a <code><varname>type</varname>="radio"</code> attribute and a <code><varname>checked</varname></code> attribute are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p,span,td</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements, <sgmltag><span></sgmltag> elements, and <sgmltag><td></sgmltag> elements are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p span</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><span></sgmltag> elements that are direct or indirect children of <sgmltag><p></sgmltag> elements are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p//span</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><span></sgmltag> elements that are direct or indirect children of <sgmltag><p></sgmltag> elements are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p/../span</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><span></sgmltag> elements that are grandchildren of <sgmltag><p></sgmltag> elements are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p[@foo^=bar]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value <emphasis>beginning</emphasis> with <literal>bar</literal> are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p[@foo$=bar]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value <emphasis>ending</emphasis> with <literal>bar</literal> are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ <varlistentry>
+ <term><code>p[@foo*=bar]</code></term>
+ <listitem>
+ <para>
+ All <sgmltag><p></sgmltag> elements that contain a <varname>foo</varname> attribute with a textual value that contains the sub-string <literal>bar</literal> in any position are selected.
+ </para>
+ </listitem>
+ </varlistentry>
+ </variablelist>
+ </example>
+ </listitem>
+ </itemizedlist>
+ <para>
The query can be triggered in three different ways. Use the <varname>timing</varname> attribute to specify the point at which the query is triggered:
</para>
<variablelist>
@@ -91,6 +215,22 @@
</listitem>
</varlistentry>
</variablelist>
+ <example id="exam-Component_Reference-richjQuery-richjQuery_example">
+ <title><sgmltag><rich:jQuery></sgmltag> example</title>
+ <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ <para>
+ In the example, the selector picks out the odd <sgmltag><tr></sgmltag> elements that are children of the element with an <code><varname>id</varname>="customlist"</code> attribute. The query <code>addClass(odd)</code> is then performed on the selection during page loading (<literal>onload</literal>) such that the <literal>odd</literal> CSS class is added to the selected elements.
+ </para>
+ </example>
+ <!-- TODO
+ <para>
+ Avoid syntax confusion.
+ </para>
+ <example id="exam-Component_Reference-richjQuery-Avoiding_syntax_confusion">
+ <title>Avoiding syntax confusion</title>
+ <programlisting language="XML" role="XML"><xi:include parse="text" href="extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample" xmlns:xi="http://www.w3.org/2001/XInclude" /></programlisting>
+ </example>
+ -->
</section>
<!-- TODO not in M2 -->
Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample
===================================================================
--- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample (rev 0)
+++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-Avoiding_syntax_confusion_0.xml_sample 2010-08-10 07:16:02 UTC (rev 18530)
@@ -0,0 +1,6 @@
+<h:form id="form">
+ <h:panelGrid id="menu">
+ <h:graphicImage value="pic1.jpg" />
+ <h:graphicImage value="pic2.jpg" />
+ </h:panelGrid>
+</h:form>
Added: branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample
===================================================================
--- branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample (rev 0)
+++ branches/development/docs/Component_Reference/src/main/docbook/en-US/extras/exam-Component_Reference-richjQuery-richjQuery_example.xml_sample 2010-08-10 07:16:02 UTC (rev 18530)
@@ -0,0 +1,5 @@
+<rich:dataTable id="customList" ... >
+ ...
+</rich:dataTable>
+
+<rich:jQuery selector="#customList tr:odd" timing="onload" query="addClass(odd)" />
More information about the richfaces-svn-commits
mailing list