+++ /dev/null
-<!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>
-
projects / eow / blobdiff