diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/test_wipeTo.html')
-rw-r--r-- | includes/js/dojox/fx/tests/test_wipeTo.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/test_wipeTo.html b/includes/js/dojox/fx/tests/test_wipeTo.html new file mode 100644 index 0000000..539453b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_wipeTo.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.wipeTo | experimental fx add-ons for the Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + .testBox { + margin:8px; + width:80px; + height:80px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + } + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + dojo.require("dojox.fx"); + dojo.require("dojo.fx"); + dojo.require("dijit.form.Button"); + var delayAnims = function(obj){ + console.log('yo'); + var delay = 0; + var _anims = []; + dojo.query(".testBox").forEach(function(n){ + _anims.push( + dojox.fx.wipeTo(dojo.mixin({ node:n, delay:(delay+=200) },obj)) + ); + }); + console.log(_anims); + dojo.fx.combine(_anims).play(); + + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.wipeTo test</h1> + + <p>quick sizeTo API overview:</p> + + <pre> + dojox.fx.wipeTo({ + // basic requirements: + node: "aDomNodeId", // or a domNode reference + width: 200 // measured in px + // height: 200 // measured in px (only one at a time, see sizeTo) + }); + </pre> + + <p>Some test boxes: (id="box1,box2,box3" etc ...)</p> + + <button dojoType="dijit.form.Button"> + wipeTo width: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo width: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 100 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 25 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 25 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 100 }); + </script> + </button> + + <div class="testBox" id="box1"> + I am some small text + </div> + + <div class="testBox" id="box2"> + I am some small text + </div> + + <div class="testBox" id="box3"> + I am some small text + </div> + + + <br style="clear:both;"> + + <br> + +</body> +</html> |