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

Make	Model	Price	Mileage
Chevrolet	Corvette	22671	11670.0
Chevrolet	Corvette	51391	66685.0
Chevrolet	Corvette	32834	12069.0
Chevrolet	Corvette	44334	54216.0
Chevrolet	Corvette	31605	13361.0
Chevrolet	Malibu	24311	62766.0
Chevrolet	Malibu	17829	38780.0
Chevrolet	Malibu	30138	59793.0
Chevrolet	Malibu	20722	28995.0
Chevrolet	Malibu	48063	35033.0
Chevrolet	Malibu	21595	79786.0
Chevrolet	Malibu	36051	75181.0
Chevrolet	Malibu	31012	50826.0
Chevrolet	S-10	32605	6062.0
Chevrolet	S-10	20947	62056.0

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
            
    <style  type="text/css">
        .odd-row {
            background-color: #ECF3FE;
        }
        .even-row {
            background-color: #FCFFFE;
        }
        .active-row {
            background-color: #FFEBDA;
        }
        
    </style>
        <br/>
            <rich:dataTable width="483" id="carList" rows="15"
                value="#{dataTableScrollerBean.allCars}" var="category">
                <f:facet name="header">
                    <rich:columnGroup>
                        <h:column><h:outputText value="Make" /></h:column>
                        <h:column><h:outputText value="Model" /></h:column>
                        <h:column><h:outputText value="Price" /></h:column>
                        <h:column><h:outputText value="Mileage" /></h:column>
                    </rich:columnGroup>
                </f:facet>

                <h:column>
                    <h:outputText value="#{category.make}" />
                </h:column>
                <h:column>
                    <h:outputText value="#{category.model}" />
                </h:column>
                <h:column>
                    <h:outputText value="#{category.price}" />
                </h:column>
                <h:column>
                    <h:outputText value="#{category.mileage}" />
                </h:column>

            </rich:dataTable>
            
            <rich:jQuery selector="#carList tr:odd" query="addClass('odd-row')" />
            <rich:jQuery selector="#carList tr:even" query="addClass('even-row')" />
            <rich:jQuery selector="#carList tr" 
                query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
            <rich:jQuery selector="#carList tr" 
                query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
        <br/>
</ui:composition>

<<Hide 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

• 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

HideView Source

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
    
    <style type="text/css">
        .pic-normal {
            width: 120px;
            border: 2px solid #ACBECE;

        }
        .wrap1 {
            width:190px;
            height: 130px;
            float: left;            
        }
    </style>
    
            
    <br/>

    <a4j:outputPanel id="gallery">
        <h:graphicImage value="/richfaces/jQuery/images/pic1.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic2.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic3.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic4.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic5.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic6.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic7.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic8.jpg" />
        <h:graphicImage value="/richfaces/jQuery/images/pic9.jpg" />
    </a4j:outputPanel>  
    
    <br style="clear:both" />


    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')"/>
    <rich:jQuery selector="#gallery img" query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
    <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)})"/>
    <rich:jQuery selector="#gallery img" query="mouseout(function(){normalPic(this)})"/>
    
    <rich:jQuery name="enlargePic" timing="onJScall" query="stop().animate({width:'180px'})" />
    <rich:jQuery name="normalPic" timing="onJScall" query="stop().animate({width:'120px'})" />
    
    

</ui:composition>

<<Hide Source