| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>dojox.fx.wipeTo | experimental fx add-ons for the Dojo Toolkit</title> |
|---|
| 6 | |
|---|
| 7 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true" ></script> |
|---|
| 8 | <style type="text/css"> |
|---|
| 9 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 10 | @import "../../../dijit/themes/dijit.css"; |
|---|
| 11 | @import "../../../dijit/themes/tundra/tundra.css"; |
|---|
| 12 | @import "../../../dijit/tests/css/dijitTests.css"; |
|---|
| 13 | .testBox { |
|---|
| 14 | margin:8px; |
|---|
| 15 | width:80px; |
|---|
| 16 | height:80px; |
|---|
| 17 | background:#ededed; |
|---|
| 18 | border:1px solid #b7b7b7; |
|---|
| 19 | -moz-border-radius:6pt; |
|---|
| 20 | -webkit-border-radius:5pt; |
|---|
| 21 | } |
|---|
| 22 | </style> |
|---|
| 23 | <script type="text/javascript"> |
|---|
| 24 | dojo.require("dojo.parser"); |
|---|
| 25 | dojo.require("dojo.fx"); |
|---|
| 26 | dojo.require("dojox.fx"); |
|---|
| 27 | dojo.require("dojox.fx.ext-dojo.NodeList"); |
|---|
| 28 | dojo.require("dijit.form.Button"); |
|---|
| 29 | var delayAnims = function(obj){ |
|---|
| 30 | console.log('yo'); |
|---|
| 31 | var delay = 0; |
|---|
| 32 | var _anims = []; |
|---|
| 33 | dojo.query(".testBox").forEach(function(n){ |
|---|
| 34 | _anims.push( |
|---|
| 35 | dojox.fx.wipeTo(dojo.mixin({ node:n, delay:(delay+=200) },obj)) |
|---|
| 36 | ); |
|---|
| 37 | }); |
|---|
| 38 | console.log(_anims); |
|---|
| 39 | dojo.fx.combine(_anims).play(); |
|---|
| 40 | } |
|---|
| 41 | </script> |
|---|
| 42 | </head> |
|---|
| 43 | <body class="tundra"> |
|---|
| 44 | <h1 class="testTitle">dojox.fx.wipeTo test</h1> |
|---|
| 45 | |
|---|
| 46 | <p>quick sizeTo API overview:</p> |
|---|
| 47 | |
|---|
| 48 | <pre> |
|---|
| 49 | dojox.fx.wipeTo({ |
|---|
| 50 | // basic requirements: |
|---|
| 51 | node: "aDomNodeId", // or a domNode reference |
|---|
| 52 | width: 200 // measured in px |
|---|
| 53 | // height: 200 // measured in px (only one at a time, see sizeTo) |
|---|
| 54 | }); |
|---|
| 55 | </pre> |
|---|
| 56 | |
|---|
| 57 | <p>Some test boxes: (id="box1,box2,box3" etc ...)</p> |
|---|
| 58 | |
|---|
| 59 | <button dojoType="dijit.form.Button"> |
|---|
| 60 | wipeTo width: 400 |
|---|
| 61 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 62 | delayAnims({ width: 400 }); |
|---|
| 63 | </script> |
|---|
| 64 | </button> |
|---|
| 65 | <button dojoType="dijit.form.Button"> |
|---|
| 66 | wipeTo width: 100 |
|---|
| 67 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 68 | delayAnims({ width: 100 }); |
|---|
| 69 | </script> |
|---|
| 70 | </button> |
|---|
| 71 | <button dojoType="dijit.form.Button"> |
|---|
| 72 | wipeTo height: 400 |
|---|
| 73 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 74 | delayAnims({ height: 400 }); |
|---|
| 75 | </script> |
|---|
| 76 | </button> |
|---|
| 77 | <button dojoType="dijit.form.Button"> |
|---|
| 78 | wipeTo height: 25 |
|---|
| 79 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 80 | delayAnims({ height: 25 }); |
|---|
| 81 | </script> |
|---|
| 82 | </button> |
|---|
| 83 | <button dojoType="dijit.form.Button"> |
|---|
| 84 | wipeTo height: 100 |
|---|
| 85 | <script type="dojo/method" data-dojo-event="onClick"> |
|---|
| 86 | delayAnims({ height: 100 }); |
|---|
| 87 | </script> |
|---|
| 88 | </button> |
|---|
| 89 | |
|---|
| 90 | <div class="testBox" id="box1"> |
|---|
| 91 | I am some small text |
|---|
| 92 | </div> |
|---|
| 93 | |
|---|
| 94 | <div class="testBox" id="box2"> |
|---|
| 95 | I am some small text |
|---|
| 96 | </div> |
|---|
| 97 | |
|---|
| 98 | <div class="testBox" id="box3"> |
|---|
| 99 | I am some small text |
|---|
| 100 | </div> |
|---|
| 101 | |
|---|
| 102 | |
|---|
| 103 | <br style="clear:both;"> |
|---|
| 104 | |
|---|
| 105 | <br> |
|---|
| 106 | |
|---|
| 107 | </body> |
|---|
| 108 | </html> |
|---|
