add sample pages on slide and fade effects

6 files changed, 313 insertions, 0 deletions

diff --git a/samples/src/main/java/gwtquery/samples/FadeEffectsSample.gwt.xml b/samples/src/main/java/gwtquery/samples/FadeEffectsSample.gwt.xml
new file mode 100644
index 00000000..401e336e
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/FadeEffectsSample.gwt.xml
@@ -0,0 +1,8 @@
+<module  rename-to='FadeEffectsSample'>
+	<inherits name='com.google.gwt.query.Query' />
+	<inherits name='gwtquery.Plugins' />
+	<entry-point
+		class="gwtquery.samples.client.effects.FadeEffectsSample">
+	</entry-point>
+</module>
+
diff --git a/samples/src/main/java/gwtquery/samples/SlideEffectsSample.gwt.xml b/samples/src/main/java/gwtquery/samples/SlideEffectsSample.gwt.xml
new file mode 100644
index 00000000..910d84ba
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/SlideEffectsSample.gwt.xml
@@ -0,0 +1,8 @@
+<module  rename-to='SlideEffectsSample'>
+	<inherits name='com.google.gwt.query.Query' />
+	<inherits name='gwtquery.Plugins' />
+	<entry-point
+		class="gwtquery.samples.client.effects.SlideEffectsSample">
+	</entry-point>
+</module>
+
diff --git a/samples/src/main/java/gwtquery/samples/client/effects/FadeEffectsSample.java b/samples/src/main/java/gwtquery/samples/client/effects/FadeEffectsSample.java
new file mode 100644
index 00000000..22677a10
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/effects/FadeEffectsSample.java
@@ -0,0 +1,64 @@
+package gwtquery.samples.client.effects;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.Function;
+
+import static com.google.gwt.query.client.plugins.Effects.Effects;
+import static com.google.gwt.query.client.GQuery.$;
+
+public class FadeEffectsSample implements EntryPoint {
+
+  public void onModuleLoad() {
+    
+    // FadeIn sample
+    $("#fadeIn div.foo").hide();
+    $("#fadeIn > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#fadeIn div.foo").as(Effects).fadeIn(2000);
+      }
+    });
+    
+    $("#fadeIn > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#fadeIn div.foo").hide();
+      }
+    });
+    
+    
+    // FadeOut sample
+    $("#fadeOut > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#fadeOut div.foo").as(Effects).fadeOut(2000);
+      }
+    });
+    
+    $("#fadeOut > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideRight div.foo").hide();
+      }
+    });
+
+ // FadeToogle sample
+    $("#fadeToogle > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#fadeToogle div.foo").as(Effects).fadeToggle(2000);
+      }
+    });
+  
+
+//Toogle sample
+  $("#toogle > button").click(new Function() {
+    @Override
+    public void f(Element e) {
+      $("#toogle div.foo").as(Effects).toggle(2000);
+    }
+  });
+  }
+
+}
diff --git a/samples/src/main/java/gwtquery/samples/client/effects/SlideEffectsSample.java b/samples/src/main/java/gwtquery/samples/client/effects/SlideEffectsSample.java
new file mode 100644
index 00000000..d99b0319
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/client/effects/SlideEffectsSample.java
@@ -0,0 +1,87 @@
+package gwtquery.samples.client.effects;
+
+import com.google.gwt.core.client.EntryPoint;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.query.client.Function;
+
+import static com.google.gwt.query.client.plugins.Effects.Effects;
+import static com.google.gwt.query.client.GQuery.$;
+
+public class SlideEffectsSample implements EntryPoint {
+
+  public void onModuleLoad() {
+
+    // SlideUp sample
+    $("#slideUp > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideUp div.foo").as(Effects).slideUp();
+      }
+    });
+    
+    $("#slideUp > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideUp div.foo").show();
+      }
+    });
+
+    // SlideDown sample
+    $("#slideDown div.foo").hide();
+    $("#slideDown > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideDown div.foo").as(Effects).slideDown();
+      }
+    });
+    
+    $("#slideDown > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideDown div.foo").hide();
+      }
+    });
+
+    // SlideToogle sample
+    $("#slideToogle > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideToogle div.foo").as(Effects).slideToggle(400);
+      }
+    });
+    
+    // SlideLeft sample
+    $("#slideLeft > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideLeft div.foo").as(Effects).slideLeft();
+      }
+    });
+    
+    $("#slideLeft > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideLeft div.foo").show();
+      }
+    });
+    
+    
+    // SlideRight sample
+    $("#slideRight div.foo").hide();
+    $("#slideRight > button").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideRight div.foo").as(Effects).slideRight();
+      }
+    });
+    
+    $("#slideRight > button.reset").click(new Function() {
+      @Override
+      public void f(Element e) {
+        $("#slideRight div.foo").hide();
+      }
+    });
+    
+  }
+
+}
diff --git a/samples/src/main/java/gwtquery/samples/public/FadeEffectsSample.html b/samples/src/main/java/gwtquery/samples/public/FadeEffectsSample.html
new file mode 100644
index 00000000..0b686d96
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/FadeEffectsSample.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<html>
+<head>
+    <title>GQuery Effects Sample</title>
+    <script language="javascript"
+            src="FadeEffectsSample.nocache.js"></script>
+	<style type="text/css">
+	   .reset{
+            float:left;
+       }
+       .foo{
+            border: 1px solid black;
+       }
+	</style>
+</head>
+<body>
+<h1>Fade Effects Samples</h1>
+<p>This page lists and shows "fade style" effects available in GwtQuery</p>
+
+<h2>FadeIn</h2>
+<div id="fadeIn">
+<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
+<button>FadeIn</button>
+<button class="reset">Reset</button>
+</div>
+
+<h2>FadeOut</h2>
+<div id="fadeOut">
+<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
+<button>FadeOut</button>
+<button class="reset">Reset</button>
+</div>
+
+<h2>FadeToogle</h2>
+<div id="fadeToogle">
+<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
+<button>FadeToogle</button>
+</div>
+
+
+<h2>Toogle</h2>
+<div id="toogle">
+<div class="foo" style="width: 200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non. Morbi in diam nibh. </div>
+<button>toogle</button>
+</div>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/samples/src/main/java/gwtquery/samples/public/SlideEffectsSample.html b/samples/src/main/java/gwtquery/samples/public/SlideEffectsSample.html
new file mode 100644
index 00000000..195cbe42
--- /dev/null
+++ b/samples/src/main/java/gwtquery/samples/public/SlideEffectsSample.html
@@ -0,0 +1,97 @@
+<!doctype html>

+<html>

+<head>

+<title>GQuery Effects Sample</title>

+<script language="javascript" src="SlideEffectsSample.nocache.js"></script>

+<style type="text/css">

+.reset {

+    float: left;

+}

+

+.foo {

+    border: 1px solid black;

+}

+</style>

+</head>

+<body>

+<h1>Slide Effects Sample</h1>

+<p>This page lists and shows all slide effects available in GwtQuery</p>

+

+<table cellpadding="10" cellspacing="10">

+    <tr>

+        <td>

+            <h2>SlideUp</h2>

+            <div id="slideUp">

+            <div class="foo" style="width: 200px;">Lorem ipsum dolor

+            sit amet, consectetur adipiscing elit. Vestibulum ultricies

+            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed

+            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam

+            venenatis dictum sem, eget euismod dui laoreet non. Morbi in

+            diam nibh.</div>

+            <button>SlideUp !</button>

+            <button class="reset">Reset</button>

+            </div>

+        </td>

+        <td>

+            <h2>SlideLeft</h2>

+            <div id="slideLeft">

+            <div class="foo" style="width: 200px; height: 200px;">Lorem

+            ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum

+            ultricies nulla condimentum diam viverra vitae hendrerit lorem

+            tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a

+            nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non.

+            Morbi in diam nibh.</div>

+            <button>SlideLeft</button>

+            <button class="reset">Reset</button>

+            </div>

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <h2>SlideDown</h2>

+            <div id="slideDown">

+            <div class="foo" style="width: 200px;">Lorem ipsum dolor

+            sit amet, consectetur adipiscing elit. Vestibulum ultricies

+            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed

+            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam

+            venenatis dictum sem, eget euismod dui laoreet non. Morbi in

+            diam nibh.</div>

+            <button>SlideDown</button>

+            <button class="reset">Reset</button>

+            </div>

+        </td>

+        <td>

+            <h2>SlideRight</h2>

+            <div id="slideRight">

+            <div class="foo" style="width: 200px; height: 200px;">Lorem

+            ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum

+            ultricies nulla condimentum diam viverra vitae hendrerit lorem

+            tempus. Sed vel enim nec libero ullamcorper hendrerit auctor a

+            nibh. Nullam venenatis dictum sem, eget euismod dui laoreet non.

+            Morbi in diam nibh.</div>

+            <button>SlideRight</button>

+            <button class="reset">Reset</button>

+            </div>

+        </td>

+    </tr>

+    <tr>

+        <td>

+            <h2>SlideToogle</h2>

+            <div id="slideToogle">

+            <div class="foo" style="width: 200px;">Lorem ipsum dolor

+            sit amet, consectetur adipiscing elit. Vestibulum ultricies

+            nulla condimentum diam viverra vitae hendrerit lorem tempus. Sed

+            vel enim nec libero ullamcorper hendrerit auctor a nibh. Nullam

+            venenatis dictum sem, eget euismod dui laoreet non. Morbi in

+            diam nibh.</div>

+            <button>SlideToggle</button>

+        </td>

+        <td></td>

+        </div>

+    </tr>

+

+

+

+</table>

+</body>

+</html>