diff options
| author | xue <> | 2005-12-05 01:00:16 +0000 |
|---|---|---|
| committer | xue <> | 2005-12-05 01:00:16 +0000 |
| commit | ccf76e430b7703db028966a845a966f50956f490 (patch) | |
| tree | 9762b746f8b7d432dbe5e5cb8f38f90007e0e1b5 /framework/Web/Javascripts/tests/Effects.html | |
| parent | 418baf36d477bcbdd6fb4eaf4037ea6a2d93f21c (diff) | |
Diffstat (limited to 'framework/Web/Javascripts/tests/Effects.html')
| -rw-r--r-- | framework/Web/Javascripts/tests/Effects.html | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/framework/Web/Javascripts/tests/Effects.html b/framework/Web/Javascripts/tests/Effects.html new file mode 100644 index 00000000..6ee5324b --- /dev/null +++ b/framework/Web/Javascripts/tests/Effects.html @@ -0,0 +1,124 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+ <title>Effects demo page</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <script type="text/javascript" src="../../base.js"></script>
+ <script type="text/javascript" src="../../dom.js"></script>
+ <script type="text/javascript" src="../../effects.js"></script>
+</head>
+
+<body style="font: 0.9em Arial;background: #f5f5f5;">
+<h1>Effect.Fade()</h1>
+
+<p>Call with <code>new Effect.Fade(element)</code></p>
+<p>Example: <code>onclick="new Effect.Fade(this)"</code></p>
+
+<div id="fade" onclick="new Effect.Fade(this)" style="border:1px solid red; padding:1em;">
+ Click here or the image to start effect
+</div>
+
+
+<h1>Effect.Highlight()</h1>
+
+<p>Call with <code>new Effect.Highlight(element)</code></p>
+<p>Example: <code>onclick="new Effect.Highlight(this)"</code></p>
+
+<div id="fade" onclick="new Effect.Highlight(this)" style="border:1px solid red; padding:1em;">
+ Click here or the image to start effect
+</div>
+
+<h1>Effect.Appear()</h1>
+
+<p>Call with <code>new Effect.Appear(element)</code></p>
+<p>Example: <code>onclick="new Effect.Appear('appear')"</code></p>
+
+<a href="#" onclick="new Effect.Appear('appear')">Start effect</a>
+
+<div id="appear" style="border:1px solid red; padding:1em;display:none;background:#fff;">
+ This is just some text
+</div>
+
+<h1>Effect.Scale()</h1>
+
+<p>Call with <code>new Effect.Scale(element, percent)</code></p>
+<p>Note: if you scale a div, all contained elements must have width or height set with <tt>em</tt>. If you
+scale an image, width and height are not required to be set. Also, Effect.Scale is aware of other scaling effects done on
+the target element, and will act accordingly. The <tt>percent</tt> parameter is always relative of the original size of the element.</p>
+<p>Example: <code>onmouseover="new Effect.Scale('scale',150)" onmouseout="new Effect.Scale('scale',100)"</code></p>
+
+<div style="height:100px">
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+<img src="fungii_logo.gif" style="width:130px;" onmouseover="new Effect.Scale(this,150)" onmouseout="new Effect.Scale(this,100)"/>
+</div>
+
+<h1>Effect.Squish()</h1>
+<p>Call with <code>new Effect.Squish(element)</code></p>
+<div id="squish" style="border:1px solid red; width:250px; height:150px;background:#fff;" onclick="new Effect.Squish(this)">
+ Click me to squish.<br/>
+ <img src="fungii_logo.gif" style="width:100%;" />
+
+</div>
+
+<h1>Effect.Puff()</h1>
+<p>Call with <code>new Effect.Puff(element)</code></p>
+<p>Works with absolute and relative positioned elements. In this example, divs with <tt>float:left</tt> are used.</p>
+<div id="puff1" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+
+</div>
+<div id="puff2" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff3" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff4" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff5" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff6" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+<div id="puff11" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff12" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff13" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff14" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#fff;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+<div id="puff15" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#f8f;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+<div id="puff16" style="float:left;margin-right:1em;border:1px solid red; padding:1em;width:10em;height:5em;background:#ff8;" onclick="new Effect.Puff(this)">
+ (floating) Click me to puff.<br/>
+ <img src="fungii_logo.gif" style="width:8em" />
+</div>
+
+</body>
+</html>
\ No newline at end of file |