git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/test_wipeTo.html

   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" djConfig="isDebug:true, parseOnLoad: true" ></script>
   8         <script type="text/javascript" src="../_base.js"></script>
   9         <style type="text/css">
  10                 @import "../../../dojo/resources/dojo.css";
  11                 @import "../../../dijit/themes/dijit.css";
  12                 @import "../../../dijit/themes/tundra/tundra.css";
  13                 @import "../../../dijit/tests/css/dijitTests.css";
  14                 .testBox {
  15                         margin:8px;
  16                         width:80px;
  17                         height:80px;
  18                         background:#ededed;
  19                         border:1px solid #b7b7b7;
  20                         -moz-border-radius:6pt;
  21                         -webkit-border-radius:5pt;
  22                 }
  23         </style>
  24         <script type="text/javascript">
  25                         dojo.require("dojox.fx.ext-dojo.NodeList");
  26                         dojo.require("dojox.fx");
  27                         dojo.require("dojo.fx");
  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                         }
  42         </script>
  43 </head>
  44 <body class="tundra">
  45         <h1 class="testTitle">dojox.fx.wipeTo test</h1>
  46
  47         <p>quick sizeTo API overview:</p>
  48
  49         <pre>
  50         dojox.fx.wipeTo({
  51                 // basic requirements:
  52                 node: "aDomNodeId", // or a domNode reference
  53                 width: 200 // measured in px
  54                 // height: 200 // measured in px (only one at a time, see sizeTo)
  55         });
  56         </pre>
  57
  58                 <p>Some test boxes: (id="box1,box2,box3" etc ...)</p>
  59
  60                 <button dojoType="dijit.form.Button">
  61                         wipeTo width: 400
  62                         <script type="dojo/method" event="onClick">
  63                                 delayAnims({ width: 400 });
  64                         </script>
  65                 </button>
  66                 <button dojoType="dijit.form.Button">
  67                         wipeTo width: 100
  68                         <script type="dojo/method" event="onClick">
  69                                 delayAnims({ width: 100 });
  70                         </script>
  71                 </button>
  72                 <button dojoType="dijit.form.Button">
  73                         wipeTo height: 400
  74                         <script type="dojo/method" event="onClick">
  75                                 delayAnims({ height: 400 });
  76                         </script>
  77                 </button>
  78                 <button dojoType="dijit.form.Button">
  79                         wipeTo height: 25
  80                         <script type="dojo/method" event="onClick">
  81                                 delayAnims({ height: 25 });
  82                         </script>
  83                 </button>
  84                 <button dojoType="dijit.form.Button">
  85                         wipeTo height: 100
  86                         <script type="dojo/method" event="onClick">
  87                                 delayAnims({ height: 100 });
  88                         </script>
  89                 </button>
  90
  91                 <div class="testBox" id="box1">
  92                         I am some small text
  93                 </div>
  94
  95                 <div class="testBox" id="box2">
  96                         I am some small text
  97                 </div>
  98
  99                 <div class="testBox" id="box3">
 100                         I am some small text
 101                 </div>
 102
 103
 104         <br style="clear:both;">
 105
 106         <br>
 107
 108 </body>
 109 </html>