source: Dev/trunk/src/client/dojox/fx/tests/test_animateClass.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago

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