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, 0 insertions, 442 deletions
diff --git a/includes/js/dojox/fx/tests/example_dojoAnimations.html b/includes/js/dojox/fx/tests/example_dojoAnimations.html deleted file mode 100644 index 2365ea1..0000000 --- a/includes/js/dojox/fx/tests/example_dojoAnimations.html +++ /dev/null @@ -1,442 +0,0 @@ -<!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> |