4 Replies Latest reply on Apr 24, 2008 2:26 AM by ybxiang.wolf

    Jquery

      Hi,

      I hope someone can help me with JQuery. Not sure this is the correct forum.

      Is it possible to call multiple functions on using the query?

      So for instance using the example give on the page could I enlarge the pic and add class? I triede the following and it did not seem to work.

      <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)},function(){jQuery(this).addClass('test-class')})"/>

        • 1. Re: Jquery

           

          "krg9263" wrote:

          <rich:jQuery selector="#gallery img" query="mouseover(function(){enlargePic(this)},function(){jQuery(this).addClass('test-class')})"/>



          What do you expect this "this" points to?

          • 2. Re: Jquery
            nathandennis

            you might should probably spend a little time looking at the generated source from the rich:jQuery tag. when i was fighting with jquery earlier this month,, i figured out it wasnt generating the code i expected. a few minor alterations and away it went.

            • 3. Re: Jquery

              I believe "this" would point to the current instance of the image object. I am actually using the exact snippet from he example. I have only added ,function(){jQuery(this).addClass('test-class')})"

              which does not seem to work. I am just looking for a way to add multiple jqueries on an mouse event. for no I solved it by combining jquery and an actual mouseover attribute on the image.

              • 4. Re: Jquery
                ybxiang.wolf

                I have copy codes from richfaces-demo's jQuery example, they do work!!!

                <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>
                
                
                 <rich:separator lineType="solid" height="1" />
                 <h:outputText value="This demo shows how to attach the mouseover/mouseout events to the
                 DOM objects. However the images below show how to make them enlarged." />
                
                 <rich:separator lineType="solid" height="1" style="padding-bottom:10px;" />
                
                 <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" />
                 </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;')" />
                 <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>