summaryrefslogtreecommitdiff
path: root/includes/js/dojox/fx/tests/test_animateClass.html
diff options
context:
space:
mode:
authormensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
committermensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>2008-11-13 09:49:11 +0000
commite44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/test_animateClass.html
parenta62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
downloadsemanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/fx/tests/test_animateClass.html')
-rw-r--r--includes/js/dojox/fx/tests/test_animateClass.html222
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>
+
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-10 10:51:37 +0000