PhotoAlbum Application Download Support Developer Guide
Skins:
Resources/Beans Handling
Ajax Miscellaneous
Usage
Tag Information

rich:jQuery integrates jQuery javascript framework into the JavaServer Faces application. The component allows to apply the styles and behavior to the DOM elements dynamically, including the result of JSF components rendering. For more information about jQuery framework and its features, you can read http://jquery.com

Integrated jQuery works without conflicts with prototype.js library that is used widely in the RichFaces library. This means that $() function is delegated back to the prototype.js. Use jQuery() function instead to refer to jQuery objects if necessary. Read more about jQuery usage with other libraries at http://docs.jquery.com/Using_jQuery_with_Other_Libraries

This demo shows how just four rich:jQuery queries allow to add zebra-style to a table and highlight rows under the mouse cursor.

Zebra-styled table with rich:jQuery example

MakeModelPriceMileage
ChevroletCorvette4685950364.0
ChevroletCorvette2606245107.0
ChevroletCorvette4604675224.0
ChevroletCorvette4334214266.0
ChevroletCorvette3410078112.0
ChevroletMalibu1978856605.0
ChevroletMalibu3574736262.0
ChevroletMalibu2948667126.0
ChevroletMalibu5124222071.0
ChevroletMalibu3771977711.0
ChevroletMalibu4175874669.0
ChevroletMalibu2840555523.0
ChevroletMalibu4815660328.0
ChevroletS-103651058963.0
ChevroletS-103432556128.0



View Source

rich:jQuery can be used in two major modes:

  • as a once time query applied immediately or on document ready event
  • as a javascript function that can be invoked from the custom javascript
The mode is chosen with timing attribute that can have the following options:
  • immediate - applying the query immediately
  • onload - applying the query when the document is loaded.
  • onJScall - applying the query by invoked the javascript function defined with the name attribute

Defining "name" attribute is mandatory when timing="onJScall". If "name" attribute is defined when timing 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 list of objects, the query defined with the query attribute will be applied to.

This demo shows how to attach the mouseover/mouseout events to the DOM objects. However the images below show how to make them enlarged.

Fisheye effect with rich:jQuery example




View Source
RichFaces Wiki RichFaces Project Site