--- /dev/null
+<!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>
projects / eow / blobdiff