git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/test_animateClass.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.style - animatated CSS functions | 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="../style.js"></script><!-- debugging -->
   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                 @import "_animation.css"; /* external stylesheets to enhance readability in this test */
  15         </style>
  16         <script type="text/javascript">
  17                 dojo.require("dojox.fx.style");
  18                 dojo.require("dijit.form.Button");
  19
  20         </script>
  21 </head>
  22 <body class="tundra">
  23
  24         <h1 class="testTitle">dojox.fx.style tests</h1>
  25
  26         <p id="fontTest">
  27         dojox.fx.style provides a few methods to animate the changes that would occur
  28         when adding or removing a class from a domNode.
  29         </p>
  30         <ul class="testUl" id="test1">
  31                 <li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li>
  32                 <li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li>
  33                 <li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li>
  34         </ul>
  35
  36         <button dojoType="dijit.form.Button">
  37                 spacing test
  38                 <script type="dojo/method" event="onClick">
  39                         var _anims = [];
  40                         // until dojox.fx.NodeList-fx is ready:
  41                         dojo.query("li.baseFont").forEach(function(node){
  42                                 _anims.push(dojox.fx.toggleClass(node,"spacedHorizontal"));
  43                         })
  44                         dojo.fx.combine(_anims).play(5);
  45                 </script>
  46         </button>
  47
  48         <button dojoType="dijit.form.Button">
  49                 line-height test
  50                 <script type="dojo/method" event="onClick">
  51                         var _anims = [];
  52                         // until dojox.fx.NodeList-fx is ready:
  53                         dojo.query("li.baseFont").forEach(function(node){
  54                                 _anims.push(dojox.fx.toggleClass(node,"spacedVertical"));
  55                         })
  56                         dojo.fx.combine(_anims).play(5);
  57                 </script>
  58         </button>
  59
  60         <button dojoType="dijit.form.Button">
  61                 font-size test
  62                 <script type="dojo/method" event="onClick">
  63                         var _anims = [];
  64                         // until dojox.fx.NodeList-fx is ready:
  65                         dojo.query("li.baseFont").forEach(function(node){
  66                                 _anims.push(dojox.fx.toggleClass(node,"fontSizeTest"));
  67                         })
  68                         dojo.fx.combine(_anims).play(5);
  69                 </script>
  70         </button>
  71
  72         <h2>testing sizes</h2>
  73
  74         <button dojoType="dijit.form.Button" id="addTall">
  75                 add .tall
  76                 <script type="dojo/method" event="onClick">
  77                         var delay = 500;
  78                         var _anims = [];
  79                         dojo.query("#colorTest > .testBox").forEach(function(n){
  80                                 _anims.push(dojox.fx.addClass({
  81                                         node:n,
  82                                         cssClass:"tall",
  83                                         delay: delay
  84                                 }));
  85                                 delay+=200;
  86                         });
  87                         this.setAttribute('disabled',true);
  88                         dijit.byId('removeTall').setAttribute('disabled',false);
  89                         dojo.fx.combine(_anims).play();
  90                 </script>
  91         </button>
  92         <button dojoType="dijit.form.Button" id="removeTall" disabled="true">
  93                 remove .tall
  94                 <script type="dojo/method" event="onClick">
  95                         var delay = 500;
  96                         var _anims = [];
  97                         dojo.query("#colorTest > .testBox").forEach(function(n){
  98                                 _anims.push(dojox.fx.removeClass({
  99                                         node:n,
 100                                         cssClass:"tall",
 101                                         delay: delay
 102                                 }));
 103                                 delay+=200;
 104                         });
 105                         this.setAttribute('disabled',true);
 106                         dijit.byId('addTall').setAttribute('disabled',false);
 107                         dojo.fx.combine(_anims).play();
 108                 </script>
 109         </button>
 110         <button dojoType="dijit.form.Button" id="addWide">
 111                 add .wide
 112                 <script type="dojo/method" event="onClick">
 113                         var delay = 500;
 114                         var _anims = [];
 115                         dojo.query("#colorTest > .testBox").forEach(function(n){
 116                                 _anims.push(dojox.fx.addClass({
 117                                         node:n,
 118                                         cssClass:"wide",
 119                                         delay: delay
 120                                 }));
 121                                 delay+=200;
 122                         });
 123                         this.setAttribute('disabled',true);
 124                         dijit.byId('removeWide').setAttribute('disabled',false);
 125                         dojo.fx.combine(_anims).play();
 126                 </script>
 127         </button>
 128         <button dojoType="dijit.form.Button" id="removeWide" disabled="true">
 129                 remove .wide
 130                 <script type="dojo/method" event="onClick">
 131                         var delay = 500;
 132                         var _anims = [];
 133                         dojo.query("#colorTest > .testBox").forEach(function(n){
 134                                 _anims.push(dojox.fx.removeClass({
 135                                         node:n,
 136                                         cssClass:"wide",
 137                                         delay: delay
 138                                 }));
 139                                 delay+=200;
 140                         });
 141                         this.setAttribute('disabled',true);
 142                         dijit.byId('addWide').setAttribute('disabled',false);
 143                         dojo.fx.combine(_anims).play();
 144                 </script>
 145         </button>
 146         <button dojoType="dijit.form.Button">
 147                 toggle .tiny
 148                 <script type="dojo/method" event="onClick">
 149                         var _anims = [];
 150                         // until dojox.fx.NodeList-fx is ready:
 151                         dojo.query("#colorTest > .testBox").forEach(function(node){
 152                                 _anims.push(dojox.fx.toggleClass(node,"tiny"));
 153                         })
 154                         dojo.fx.combine(_anims).play(5);
 155                 </script>
 156         </button>
 157
 158         <div id="colorTest">
 159                 <div id="colorTest1" class="floating testBox white"></div>
 160                 <div id="colorTest2" class="floating testBox black"></div>
 161                 <div id="colorTest3" class="floating testBox green"></div>
 162         </div>
 163
 164         <br style="clear:both">
 165
 166         <h2>testing position</h2>
 167         <p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos.
 168         normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar
 169         will take precedent. the below position test shows the results of this:
 170         </p>
 171
 172         <button dojoType="dijit.form.Button">
 173                 .offsetSome
 174                 <script type="dojo/method" event="onClick">
 175                         dojox.fx.toggleClass("positionTest","offsetSome").play();
 176                 </script>
 177         </button>
 178         <button dojoType="dijit.form.Button">
 179                 .topLeft
 180                 <script type="dojo/method" event="onClick">
 181                         dojox.fx.toggleClass("positionTest","topLeft").play();
 182                 </script>
 183         </button>
 184         <button dojoType="dijit.form.Button">
 185                 .bottomRight
 186                 <script type="dojo/method" event="onClick">
 187                         dojox.fx.toggleClass("positionTest","bottomRight").play();
 188                 </script>
 189         </button>
 190
 191         <div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock">
 192                 <div class="testBox absolutely" id="positionTest"></div>
 193         </div>
 194
 195         <button dojoType="dijit.form.Button">
 196                 toggle .green
 197                 <script type="dojo/method" event="onClick">
 198                         dojox.fx.toggleClass("positionTest","green").play();
 199                 </script>
 200         </button>
 201         <button dojoType="dijit.form.Button">
 202                 toggle .black
 203                 <script type="dojo/method" event="onClick">
 204                         dojox.fx.toggleClass("positionTest","black").play();
 205                 </script>
 206         </button>
 207         <button dojoType="dijit.form.Button">
 208                 toggle .blue
 209                 <script type="dojo/method" event="onClick">
 210                         dojox.fx.toggleClass("positionTest","blue").play();
 211                 </script>
 212         </button>
 213
 214         <p>Some properties
 215         cannot be modified (fontFace, and so on), so to ensure the results at the end
 216         of the animation are applied correctly and fully, the class name is set on the node
 217         via dojo.add/removeClass().
 218         </p>
 219
 220 </body>
 221 </html>
 222