diff options
Diffstat (limited to 'includes/js/dojox/fx/tests/test_animateClass.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/test_animateClass.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/test_animateClass.html b/includes/js/dojox/fx/tests/test_animateClass.html new file mode 100644 index 0000000..c963ca1 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_animateClass.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../style.js"></script><!-- debugging --> + <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"; + @import "_animation.css"; /* external stylesheets to enhance readability in this test */ + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.style"); + dojo.require("dijit.form.Button"); + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.style tests</h1> + + <p id="fontTest"> + dojox.fx.style provides a few methods to animate the changes that would occur + when adding or removing a class from a domNode. + </p> + <ul class="testUl" id="test1"> + <li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li> + </ul> + + <button dojoType="dijit.form.Button"> + spacing test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedHorizontal")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + line-height test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedVertical")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + font-size test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"fontSizeTest")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <h2>testing sizes</h2> + + <button dojoType="dijit.form.Button" id="addTall"> + add .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeTall" disabled="true"> + remove .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="addWide"> + add .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeWide" disabled="true"> + remove .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .tiny + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("#colorTest > .testBox").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"tiny")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <div id="colorTest"> + <div id="colorTest1" class="floating testBox white"></div> + <div id="colorTest2" class="floating testBox black"></div> + <div id="colorTest3" class="floating testBox green"></div> + </div> + + <br style="clear:both"> + + <h2>testing position</h2> + <p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. + normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar + will take precedent. the below position test shows the results of this: + </p> + + <button dojoType="dijit.form.Button"> + .offsetSome + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","offsetSome").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .topLeft + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","topLeft").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .bottomRight + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","bottomRight").play(); + </script> + </button> + + <div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock"> + <div class="testBox absolutely" id="positionTest"></div> + </div> + + <button dojoType="dijit.form.Button"> + toggle .green + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","green").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .black + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","black").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .blue + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","blue").play(); + </script> + </button> + + <p>Some properties + cannot be modified (fontFace, and so on), so to ensure the results at the end + of the animation are applied correctly and fully, the class name is set on the node + via dojo.add/removeClass(). + </p> + +</body> +</html> + |