diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/example_dojoAnimations.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/example_dojoAnimations.html | 442 |
1 files changed, 442 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/example_dojoAnimations.html b/includes/js/dojox/fx/tests/example_dojoAnimations.html new file mode 100644 index 0000000..2365ea1 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_dojoAnimations.html @@ -0,0 +1,442 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>skeleton page | The Dojo Toolkit</title> + + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + body, html { + width:100%; + margin:0; + padding:0; + font:11pt Arial,sans-serif; + color:#666; + } + + #container { + width:760px; + margin:0 auto; + } + + div.testBox { + border:2px solid #ededed; + background:#fefefe; + height:200px; + margin:0 auto; + position:relative; + } + + div.testItem { + position:absolute; + background:#fff url('images/averycutedog.jpg') no-repeat center center; + border:2px solid #f0f0f0; + margin:0; + padding:0; + height:175px; + width:175px; + top:10px; + left:10px; + } + + .altItem { + position:absolute; + top:10px; + left:295px; + } + + .pad { + padding:4px; + } + + .trick { + height:175px; + width:175px; + visibility:hidden; + } + .odd, + .even { margin-left:1px; } + + #lorem { + position:absolute; + top:10px; + left:15px; + font:8pt Arial,sans-serif; + width:175px; + padding:4px; + background:#ededed; + } + + #fisheyeList { + width:95px; + background:#666; + padding:7px; + } + #fisheyeList li { + color:#fff; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); // for the tests + + // core animations: + dojo.require("dojo.fx"); + + // provides dojo.query() animations: + dojo.require("dojo.NodeList-fx"); + dojo.require("dojox.fx.ext-dojo.NodeList"); + + // core dojox package: + dojo.require("dojox.fx"); + dojo.require("dojox.fx._core"); // _Line + + // addons: + dojo.require("dojox.fx.style"); + dojo.require("dojox.fx.easing"); + + // examples inline: + dojo.require("dojox.widget.FisheyeLite"); + </script> + +</head> +<body class="tundra"> + <div id="container"> + + <h2>Dojo FX: base animations</h2> + + <button dojoType="dijit.form.Button"> + Fade In/Out + <script type="dojo/method" event="onClick"> + dojo.fadeOut({ node:"testSlide", + onEnd:function(){ + dojo.fadeIn({ node:"testSlide", delay:300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: height + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ height:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ height:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ width:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ width:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="testSlideWrapper"> + <div class="testItem" id="testSlide"> + <div class="trick"> </div> + </div> + </div> + + + <h2>Animate CSS Properties:</h2> + + <button dojoType="dijit.form.Button"> + marginLeft + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:322, unit:"px", start:1 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:1, start:322, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + left / paddingTop + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + left: { + end: dojo.marginBox("cssNodeWrap").w - 195, + unit:"px" + }, + paddingTop:{ end:17, unit:"px", start:4 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + paddingTop:{ end:4, start:17, unit:"px" }, + left: { end: 10, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fontSize / width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:700, unit:"px", start:175 }, + fontSize:{ end:21, unit:"pt", start:11 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:175, unit:"px" }, + fontSize:{ end:11, start:21, unit:"pt" } + }, + delay:700 + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="cssNodeWrap"> + <div id="cssNode"> + <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. + Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. + Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. + In erat. + </p> + </div> + </div> + + <h2>dojo.fx - Core animations</h2> + + <button dojoType="dijit.form.Button"> + Slide + <script type="dojo/method" event="onClick"> + // we're 175px, slide to containerWidth - 195 + var left = dojo.marginBox("testSlideWrapper").w - 195; + // make and play the animation + dojo.fx.slideTo({ + top:10, + left:left, + node:"testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }).play() + </script> + </button> + + <button dojoType="dijit.form.Button"> + Combine Slide / Fade + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fx.slideTo({ + top: 10, + left: dojo.marginBox("testSlideWrapper").w - 195, + node: "testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }); + var anim2 = dojo.fadeOut({ + node: "testSlideToo", + onEnd: function(){ + // we could switch out the backgroundImage property here. + dojo.fadeIn({ node:"testSlideToo" }).play(); + } + }); + var combined = dojo.fx.combine([anim1,anim2]); + combined.play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Chain (4) + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fadeOut({ node:"testSlideToo", + // so anim1 is over, making this onEnd and anim2 basically + // a combine() (depending on the duration: ) + onEnd:function(){ + var delay = 125; + dojo.fadeIn({ node:'testSlideToo' }).play(delay); + } + }); + + var anim2 = dojo.animateProperty({ + node:"testSlideToo", + properties:{ + left:{ + end: dojo.marginBox("testSlideTooWrap").w - 195, + unit: "px" + } + }, + onEnd: function(){ + dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123); + } + }); + dojo.fx.chain([anim1,anim2]).play(); + </script> + </button> + + <div class="testBox" id="testSlideTooWrap"> + <div class="testItem" id="testSlideToo"> + <div class="trick"></div> + </div> + </div> + + <h2>dojo.query FX</h2> + + <button dojoType="dijit.form.Button"> + fade .even + <script type="dojo/method" event="onClick"> + dojo.query(".even","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fade .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + shift .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:300, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + mmm, easing + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + easing:dojox.fx.easing.backOut, + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:600, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + duration:1300, + easing:dojox.fx.easing.bounceOut, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Setup FisheyeList + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dojo.query("li","fisheyeList").forEach(function(n){ + new dojox.widget.FisheyeLite({ + properties:{ + marginLeft:17, + width:1.175 + }, + onClick:function(){ + dojo.byId("clickAlert").innerHTML = "clicked: " + this.id; + }, + easeIn:dojox.fx.easing.elasticOut, + durationIn:1700 + },n).startup(); + }).style("cursor","pointer"); + </script> + </button> + + <div class="testBox" id="queryParent"> + <ul id="queryUl"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + </ul> + <div class="altItem"> + <p>(FisheyeLite makes this easy. be creative:)</p> + <ul id="fisheyeList"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even" id="testIdFish">with id</li> + <li class="odd">odd row</li> + </ul> + <p id="clickAlert"></p> + </div> + </div> + + </div> +</body> +</html> |