From richfaces-svn-commits at lists.jboss.org Tue Oct 16 11:24:14 2007 Content-Type: multipart/mixed; boundary="===============0524593501495727679==" MIME-Version: 1.0 From: richfaces-svn-commits at lists.jboss.org To: richfaces-svn-commits at lists.jboss.org Subject: [richfaces-svn-commits] JBoss Rich Faces SVN: r3399 - trunk/docs/userguide/en/src/main/docbook/included. Date: Tue, 16 Oct 2007 11:24:13 -0400 Message-ID: --===============0524593501495727679== Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: quoted-printable Author: vkorluzhenko Date: 2007-10-16 11:24:13 -0400 (Tue, 16 Oct 2007) New Revision: 3399 Modified: trunk/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml trunk/docs/userguide/en/src/main/docbook/included/jQuery.xml Log: http://jira.jboss.com/jira/browse/RF-1123 -added description Modified: trunk/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml 2007-= 10-16 15:00:44 UTC (rev 3398) +++ trunk/docs/userguide/en/src/main/docbook/included/jQuery.desc.xml 2007-= 10-16 15:24:13 UTC (rev 3399) @@ -7,23 +7,22 @@
Description - = + The + <rich:jQuery> + allows to apply styles and behaviour to the DOM object= . = - +
Key Features - + + No developer JavaScript code needed to use the compo= nent on a page + Presents jQuery JavaScript framework functionality + Works without conflicts with prototype.js library +
Modified: trunk/docs/userguide/en/src/main/docbook/included/jQuery.xml =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D= =3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D --- trunk/docs/userguide/en/src/main/docbook/included/jQuery.xml 2007-10-16= 15:00:44 UTC (rev 3398) +++ trunk/docs/userguide/en/src/main/docbook/included/jQuery.xml 2007-10-16= 15:24:13 UTC (rev 3399) @@ -57,13 +57,12 @@ = To create the simplest variant on a page use the following synta= x: = - Example: - + +...]]> =
@@ -81,5 +80,265 @@ =
Details of Usage + + <rich:jQuery> + can be used in two major modes: + + as a one-time query applied immediately or on document rea= dy event + as a JavaScript function that can be invoked from the Java= Script code + + The mode is chosen with + "timing" + attribute that has following options: + + immediate - execution a query immediately + onload - execution a query when a document is loaded + onJScall - execution a query by invoked JavaScript functio= n defined with the + "name" + attribute + + Definition 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 acco= rding to this + value, but you still have an opportunity to invoke it by function na= me. + The + "selector" + attribute define an object or a list of objects. The que= ry is defined with the + "query" + attribute. + There is an example how to highlight odd rows in a table: + + Example: + + + .odd { + background-color: #FFC; + } + + ... + + + ... + + ... + +...]]> + The + "selector" + attribute uses defined by w3c consortium syntax for CSS = rule selector with some jQuery + extensions. + Those are typical examples of using selector in the + <rich:jQuery> + component. + + + Examples of using selector + + + + + Selector + + Comment + + + + + + + "p[a]" + In a document find all "p" tags with "a&= quot; tag + inside + + + + "ul/li" + All "li" elements of unordered "ul"= lists + + + + + "p.foo[a]" + All "p" tags with "foo" class and i= nserted + "a" tag + + + + "input[@name=3Dbar]" + All "input" tags with "name" attrib= ute which + value is "bar" + + + + "input[@type=3Dradio][@checked]" + Find all "input" tags with attribute + "type"=3D"radio" and attribute value =3D + "chekced" + + + + "p,span,td" + All tag elements "p" or"span" or + "td" + + + + "p#secret" + "p" paragraph element with "id" + identification =3D "secret" + + + + "p span" + "span" tag is a (direct or non-direct) child = of + "p" tag. If it's necessary, use "p > + span" or "p/span" + + + + "p[@foo^=3Dbar]" + "p" tag containing "foo" attribute = with + textual value beginning with "bar" word + + + + "p[@foo$=3Dbar] " + "p" tag containing "foo" attribute = with + textual value ending with "bar" word + + + + "p[@foo*=3Dbar] " + "p" tag with "foo" attribute contai= ning + substring "bar" in any place + + + + "p//span " + "span" tag is a (direct or non-direct) child = of + "p" tag + + + + "p/../span " + "span" tag is a grandchild of "p" t= ag + + + + +
+ + In addition, RichFaces allows using either component id or clien= t id if you apply the + query to the JSF component. When you define a selector, RichFaces ex= amines its content and + tries to replace the defined in the selector id with component id if= found. + For example, you have the following code: + + + ... + + + + ... + + +...]]> + + The actual id of the + <h:panelGrid> + table in the browser DOM is "form:menu". Howev= er, you still can + reference to images inside this table using the following selector: = + + +...]]> + + You can define the exact id in the selector if you want. The fol= lowing code reference to + the same set of DOM object: + + +...]]> + + Pay attention to the double slashes that escapes the colon in th= e id. + + In case when the + "name" + attribute is defined, + <rich:jQuery> + generates a JavaScript function that might be used from = any place of JavaScript + code on a page. + + There is an example how to enlarge the picture smoothly on mouse= over event and return + back to the normal size on mouse out: + + + + ... + + = +...]]> + + The JavaScript could use two parameters. The first parameter is = a replacement for the + selector attribute. Thus, you can share the same query execution it = to the different DOM + objects. You can use the literal value or the direct reference to th= e existing DOM object. The + second parameter can be used to path the specific value inside the q= uery. The JSON syntax is + used for the second parameter. The "param." namespace is u= sed for + referencing to data inside the parameter value. + + + <rich:jQuery> + adds styles and behavior to the DOM object dynamically. = This means if you replace + something on a page during an Ajax response, the applied artifacts w= ill be overwritten. You + are resistible to apply them again after the Ajax response is comple= te. + Normally, it could be done with reRendering the + <rich:jQuery> + components in the same Ajax interaction with the compone= nts those queries are + applied to. Note, that queries with + "timing" + attribute set to "onload"= will not be + invoked even the query is reRendered because, the DOM document is no= t fully reloaded during + the Ajax interaction. If you need to re-applies query with + "onload" value of + "timing" + attribute , define the + "name + attribute and invoke the query by name in the + "oncomplete" + attribute of the Ajax component. + + RichFaces includes jQuery JavaScript framework. You can use the = futures of jQuery directly + without defining the + <rich:jQuery> + component on a page if it is convenient for you. To star= t using the jQuery feature + on the page, include the library to the page with the following code= : + + +...]]> + + Refer to the jQuery docum= entation for the + right sintax. Remember to use jQuery() function instead of $(), as s= oon as jQuery works + without conflicts with prototype.js.
+
+ Relevant Resources Links + More information about jQuery framework and its features you c= an read here. + How to use jQuery with other libraries see here. + = +
--===============0524593501495727679==--