Well if someone could relay this into the google group that would be great.
I'm logged into google but cannot create a new topic :(
pfft!
Thanks
Chris
On 04/04/2012, at 4:12 PM, Chris Mylonas wrote:
> Hi All,
>
> I'll post this in the google groups linked to the tapestry5-jquery project as
> well.
> To repeat what I have done:
>
>
> 1) Create a package under pages called test.
> 2) Create class JQuery.java with this in it.
>
> package org.example.jquerytest.pages.test;
>
> import org.apache.tapestry5.annotations.Import;
>
> @Import(stylesheet="context:layout/mouseover.css",library={"context:js/mouseover.js"})
> @ImportJQueryUI("jquery.ui.mouse")
> public class JQuery {
>
> }
>
> 3. Create src/main/webapp/layout/mouseover.css with this in it.
>
> div.out { width:40%; height:120px; margin:0 15px;
> background-color:#D6EDFC; float:left; }
> div.in { width:60%; height:60%;
> background-color:#FFCC00; margin:10px auto; }
> p { line-height:1em; margin:0; padding:0; }
>
> 4. Create src/main/webapp/js/mouseover.js with this in it.
>
> var i = 0;
> $("div.overout").mouseover(function() {
> i += 1;
> $(this).find("span").text( "mouse over x " + i );
> }).mouseout(function(){
> $(this).find("span").text("mouse out ");
> });
>
> var n = 0;
> $("div.enterleave").mouseenter(function() {
> n += 1;
> $(this).find("span").text( "mouse enter x " + n );
> }).mouseleave(function() {
> $(this).find("span").text("mouse leave");
> });
>
>
> 5. Create the template for the pages/test/JQuery.java file calling it
> pages/test/JQuery.tml
>
> <html t:type="layout" title="Contact org.example"
> xmlns:t="http://tapestry.apache.org/schema/tapestry_5_3.xsd";
> xmlns:p="tapestry:parameter">
>
> <p>JQuery Testing</p>
>
> <div class="out overout">
> <span>move your mouse</span>
> <div class="in">
> </div>
> </div>
>
> <div class="out enterleave">
> <span>move your mouse</span>
> <div class="in">
> </div>
> </div>
>
>
> </html>
>
>
> The css and js files are included in the html source and i can view them, so
> they are there and jquery.ui.mouse.min.js is also included and viewable.
>
> MouseOver function as per the jquery example http://api.jquery.com/mouseover/
> does not work though.
>
> Any ideas?
>
> Cheers
> Chris
