git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/test_sizeTo.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.sizeTo | 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                         position:absolute;
  16                         top:0; left:0;
  17                         width:50px;
  18                         height:50px;
  19                         background:#ededed;
  20                         border:1px solid #b7b7b7;
  21                         -moz-border-radius:6pt;
  22                         -webkit-border-radius:5pt;
  23                         overflow:hidden;
  24                 }
  25         </style>
  26         <script type="text/javascript">
  27
  28         dojo.require("dojox.fx.ext-dojo.NodeList");
  29
  30         var test1 = function(e){
  31                 // this is our click test,
  32                 dojox.fx.sizeTo({
  33                         node: e.target,
  34                         width: 120,
  35                         height:120,
  36                         duration:250
  37                 }).play(5);
  38         };
  39
  40         var testundo = function(e){
  41                 dojox.fx.sizeTo({
  42                         node: e.target,
  43                         width:50,
  44                         height:50,
  45                         duration:320
  46                 }).play(5);
  47
  48
  49         };
  50
  51         var test2 = function(e){
  52                 dojox.fx.sizeTo({
  53                       node: e.target,
  54                       width: 120,
  55                       height:120,
  56                       duration:120,
  57                       method:"combine"
  58                 }).play(5);
  59         };
  60
  61         var noIdTest = function(){
  62                 var myNode = dojo.query(".noIdHere")[0]; // first one wins
  63                 if(myNode){
  64                         // mmm, fake events (all we're using is the target anyway ... )
  65                         (!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode });
  66                         dojo.toggleClass(myNode,"testRun");
  67                 }
  68         };
  69
  70         var init = function(){
  71
  72                 // lets setup out connections, etc ...
  73                 dojo.connect(dojo.byId("sizer1"),"onmousedown","test1");
  74                 dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest
  75
  76                 // did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right.
  77                 dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2");
  78                 dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo");
  79
  80                 // example using dojo.query to get a couple of nodes and roll into one anim
  81                 var hasRun = false;
  82                 dojo.connect(dojo.byId("sizer3"),"onclick",function(e){
  83                         var _anims = [];
  84                         dojo.query(".testBox").forEach(function(n){
  85                                 _anims.push(
  86                                         dojox.fx.sizeTo({ node: n,
  87                                                 width: ( hasRun ? "50" : "150"),
  88                                                 height: ( hasRun ? "50" : "150"),
  89                                                 method:"chain",
  90                                                 duration:720
  91                                         })
  92                                 );
  93                         });
  94                         hasRun=!hasRun;
  95                         var anim = dojo.fx.combine(_anims);
  96                         anim.play();
  97                 });
  98         };
  99         dojo.addOnLoad(init);
 100         </script>
 101 </head>
 102 <body class="tundra">
 103         <h1 class="testTitle">dojox.fx.sizeTo test</h1>
 104
 105         <p>quick sizeTo API overview:</p>
 106
 107         <pre>
 108         dojox.fx.sizeTo({
 109                 // basic requirements:
 110                 node: "aDomNodeId", // or a domNode reference
 111                 width: 200, // measured in px
 112                 height: 200, // measured in px
 113                 method: "chain" // is default, or "combine"
 114         });
 115         </pre>
 116         <p>
 117         little test blocks (works in FF/win/mac + ie6) <a href="javascript:void(0)" onClick="dojo.query('.testBox').sizeTo({ width: 200, height: 200, duration:400 }).play()">dojo.query() test</a>
 118         </p>
 119
 120         <div style="position:relative; height:60px; width:600px; margin:0 auto;">
 121                 <div id="sizer1" class="testBox">
 122                 mouse down / mouse up
 123                 </div>
 124                 <div id="sizer2" class="testBox" style="left:60px;" >
 125                 hover / exit
 126                 </div>
 127                 <div class="testBox noIdHere" style="left:120px; ">
 128                 <a href="javascript:noIdTest()">noIdTest()</a>
 129                 </div>
 130                 <div class="testBox" id="sizer3" style="left:180px;">
 131                 all of em'
 132                 </div>
 133         </div>
 134         <br style="clear:both;">
 135
 136         (click the box labeled "all of em'" again to reset all nodes)
 137
 138         HTML AFTER
 139         <br>
 140
 141 </body>
 142 </html>