source: Dev/trunk/src/client/dojox/widget/tests/test_Rotator.html

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

Added Dojo 1.9.3 release.
File size: 44.9 KB
Line 
1<!DOCTYPE HTML>
2<html>
3<head>
4        <title>dojox.widget.Rotator Test</title>
5        <style type="text/css">
6        @import "../../../dojo/resources/dojo.css";
7        @import "../../../dijit/tests/css/dijitTests.css";
8
9        .rotator{
10                background-color:#fff;
11                border:solid 1px #e5e5e5;
12                width:384px;
13                height:90px;
14                overflow:hidden;
15        }
16        .rotatorStacked{
17                width:384px;
18                height:90px;
19                overflow:hidden;
20                position:absolute;
21                left:0;
22                top:0;
23        }
24        .rotatorStacked .pane{
25                background-color:transparent;
26        }
27        .pane{
28                background-color:#fff;
29                width:384px;
30                height:90px;
31                overflow:hidden;
32        }
33        .logWindow{
34                border:solid 1px #e5e5e5;
35                margin-left:20px;
36                width:400px;
37                height:90px;
38                overflow:auto;
39        }
40        </style>
41
42        <script type="text/javascript" src="../../../dojo/dojo.js"
43                data-dojo-config="async: true, selectorEngine:'acme'"></script>
44        <script type="text/javascript">
45        require([
46                "dojo/parser",
47                "dojo/_base/html",
48                "dojo/dom",
49                "dojox/widget/Rotator",
50                "dojo/fx/easing",
51                "dojo/domReady!",
52                "dojox/widget/rotator/Fade",
53                "dojox/widget/rotator/Pan",
54                "dojox/widget/rotator/PanFade",
55                "dojox/widget/rotator/Slide",
56                "dojox/widget/rotator/Wipe"
57        ], function(parser, html, dom, Rotator, e) {
58
59                // Set global variable used in transitionParams
60                easing = e;
61
62                parser.parse();
63
64                log = function(id, msg){
65                        var e = dom.byId(id);
66                        e.innerHTML += msg + "<br>";
67                        e.scrollTop = 9999;
68                };
69
70                // programmatic example
71                var contributors = [
72                        [ "http://www.nexaweb.com",             "nexaweb.png",          "Nexaweb" ],
73                        [ "http://www.renkoo.com",              "renkoo.png",           "Renkoo" ],
74                        [ "http://www.sitepen.com",             "sitepen.png",          "Sitepen" ],
75                        [ "http://www.tibco.com",               "tibco.png",            "Tibco" ],
76                        [ "http://www.webtide.com",             "webtide.png",          "Webtide" ],
77                        [ "http://www.openlaszlo.com",  "openlaszlo.png",       "OpenLaszlo" ],
78                        [ "http://www.sun.com",                 "sun.png",                      "Sun" ],
79                        [ "http://www.google.com",              "google.png",           "Google" ],
80                        [ "http://www.aptana.com",              "aptana.png",           "Aptana" ],
81                        [ "http://www.aol.com",                 "aol.png",                      "AOL" ],
82                        [ "http://www.ibm.com",                 "ibm.png",                      "IBM" ],
83                        [ "http://www.zend.com",                "zend.png",                     "Zend" ],
84                        [ "http://www.bea.com",                 "bea.png",                      "BEA" ],
85                        [ "http://www.uxebu.com",               "uxebu.png",            "Uxebu" ],
86                        [ "http://www.wavemaker.com",   "wavemaker.png",        "WaveMaker" ],
87                        [ "http://www.aptana.com",              "aptana.png",           "Aptana" ]
88                ];
89
90                var panes = [];
91                for(var i=0; i<contributors.length; i++){
92                        var html = '<a href="' + contributors[i][0] + '" target="_new"><img src="images/rotator_'
93                                                + contributors[i][1] + '" width="130" alt="' + contributors[i][2] + '"/></a>';
94                        if(i % 2 == 0){
95                                panes.push({
96                                        className: "pane",
97                                        innerHTML: html
98                                });
99                        }else{
100                                panes[panes.length-1].innerHTML += html
101                        }
102                }
103
104                var r = new Rotator({
105                                id: "myRotator13",
106                                duration: 2000,
107                                transition: "dojox.widget.rotator.fade",
108                                panes: panes
109                        },
110                        dom.byId("myRotator13")
111                );
112        })
113        </script>
114</head>
115<body>
116
117        <h1 class="testTitle">dojox.widget.Rotator Test</h1>
118
119        <h2>Controlled By Topics, Default Swap Transition</h2>
120       
121        <p>
122        <button onclick="dojo.publish('myRotator/rotator/control', ['prev']);">Prev</button>
123        <button onclick="dojo.publish('myRotator/rotator/control', ['next']);">Next</button>
124        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 0]);">Goto 0 (Nexaweb, Renkoo)</button>
125        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 1]);">Goto 1 (Sitepen, Tibco)</button>
126        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 2]);">Goto 2 (Webtide, OpenLaszlo)</button>
127        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 3]);">Goto 3 (Sun, Google)</button>
128        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 4]);">Goto 4 (Aptana, AOL)</button>
129        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 5]);">Goto 5 (IBM, Zend)</button>
130        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 6]);">Goto 6 (BEA, Uxebu)</button>
131        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 7]);">Goto 7 (WaveMaker, Aptana)</button>
132        <button onclick="dojo.publish('myRotator/rotator/control', ['go', 8]);">Goto 8 (bad)</button>
133        <button onclick="dojo.publish('myRotator/rotator/control', ['test']);">Bad Action</button>
134        </p>
135       
136        <div data-dojo-type="dojox/widget/Rotator" class="rotator" id="myRotator">
137                <div class="pane">
138                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
139                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
140                </div>
141                <div class="pane">
142                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
143                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
144                </div>
145                <div class="pane">
146                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
147                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
148                </div>
149                <div class="pane">
150                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
151                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
152                </div>
153                <div class="pane">
154                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
155                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
156                </div>
157                <div class="pane">
158                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
159                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
160                </div>
161                <div class="pane">
162                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
163                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
164                </div>
165                <div class="pane">
166                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
167                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
168                </div>
169        </div>
170
171        <h2>Controlled By data-dojo-id Reference, Default Swap Transition</h2>
172       
173        <p>
174        <button onclick="myRotator2.prev();">Prev</button>
175        <button onclick="myRotator2.next();">Next</button>
176        <button onclick="myRotator2.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
177        <button onclick="myRotator2.go(1);">Goto 1 (Sitepen, Tibco)</button>
178        <button onclick="myRotator2.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
179        <button onclick="myRotator2.go(3);">Goto 3 (Sun, Google)</button>
180        <button onclick="myRotator2.go(4);">Goto 4 (Aptana, AOL)</button>
181        <button onclick="myRotator2.go(5);">Goto 5 (IBM, Zend)</button>
182        <button onclick="myRotator2.go(6);">Goto 6 (BEA, Uxebu)</button>
183        <button onclick="myRotator2.go(7);">Goto 7 (WaveMaker, Aptana)</button>
184        <button onclick="myRotator2.go(8);">Goto 8 (bad)</button>
185        </p>
186       
187        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator2">
188                <div class="pane">
189                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
190                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
191                </div>
192                <div class="pane">
193                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
194                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
195                </div>
196                <div class="pane">
197                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
198                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
199                </div>
200                <div class="pane">
201                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
202                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
203                </div>
204                <div class="pane">
205                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
206                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
207                </div>
208                <div class="pane">
209                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
210                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
211                </div>
212                <div class="pane">
213                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
214                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
215                </div>
216                <div class="pane">
217                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
218                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
219                </div>
220        </div>
221
222        <h2>Crossfade Transition</h2>
223       
224        <p>
225        <button onclick="myRotator3.prev();">Prev</button>
226        <button onclick="myRotator3.next();">Next</button>
227        <button onclick="myRotator3.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
228        <button onclick="myRotator3.go(1);">Goto 1 (Sitepen, Tibco)</button>
229        <button onclick="myRotator3.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
230        <button onclick="myRotator3.go(3);">Goto 3 (Sun, Google)</button>
231        <button onclick="myRotator3.go(4);">Goto 4 (Aptana, AOL)</button>
232        <button onclick="myRotator3.go(5);">Goto 5 (IBM, Zend)</button>
233        <button onclick="myRotator3.go(6);">Goto 6 (BEA, Uxebu)</button>
234        <button onclick="myRotator3.go(7);">Goto 7 (WaveMaker, Aptana)</button>
235        </p>
236       
237        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator3"
238                 data-dojo-props="transition: 'dojox.widget.rotator.crossFade'">
239                <div class="pane">
240                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
241                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
242                </div>
243                <div class="pane">
244                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
245                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
246                </div>
247                <div class="pane">
248                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
249                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
250                </div>
251                <div class="pane">
252                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
253                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
254                </div>
255                <div class="pane">
256                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
257                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
258                </div>
259                <div class="pane">
260                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
261                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
262                </div>
263                <div class="pane">
264                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
265                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
266                </div>
267                <div class="pane">
268                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
269                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
270                </div>
271        </div>
272
273        <h2>Crossfade Transition 2</h2>
274       
275        <p>
276        <button onclick="myRotator3_2.prev();">Prev</button>
277        <button onclick="myRotator3_2.next();">Next</button>
278        <button onclick="myRotator3_2.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
279        <button onclick="myRotator3_2.go(1);">Goto 1 (Sitepen, Tibco)</button>
280        <button onclick="myRotator3_2.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
281        <button onclick="myRotator3_2.go(3);">Goto 3 (Sun, Google)</button>
282        </p>
283
284        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator3_2"
285                 data-dojo-props="transition: 'dojox.widget.rotator.crossFade'">
286                <div class="pane" style="background-color:red;"></div>
287                <div class="pane" style="background-color:yellow;"></div>
288                <div class="pane" style="background-color:green;"></div>
289                <div class="pane" style="background-color:blue;"></div>
290        </div>
291       
292        <h2>Pan Transition</h2>
293       
294        <p>
295        <button onclick="myRotator4.prev();">Prev</button>
296        <button onclick="myRotator4.next();">Next</button>
297        <button onclick="myRotator4.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button>
298        <button onclick="myRotator4.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button>
299        <button onclick="myRotator4.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button>
300        <button onclick="myRotator4.go(3);">Goto 3 (Sun, Google) [pan up]</button>
301        </p>
302       
303        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator4"
304                 data-dojo-props="transition: 'dojox.widget.rotator.panLeft'">
305                <div class="pane">
306                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
307                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
308                </div>
309                <div class="pane" transition="dojox.widget.rotator.panDown">
310                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
311                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
312                </div>
313                <div class="pane" transition="dojox.widget.rotator.panRight">
314                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
315                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
316                </div>
317                <div class="pane" transition="dojox.widget.rotator.panUp">
318                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
319                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
320                </div>
321        </div>
322
323        <h2>Pan Continuous Transition</h2>
324       
325        <p>It is set to wrap so it will detect the shortest distance to the next pane and determine to go left or right.</p>
326        <p>The transition duration is 1 second. Quick transitions are enabled, so it will perform X number of transitions within the transition duration timeframe.</p>
327       
328        <p>
329        <button onclick="myRotator5.prev();">Prev</button>
330        <button onclick="myRotator5.next();">Next</button>
331        <button onclick="myRotator5.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
332        <button onclick="myRotator5.go(1);">Goto 1 (Sitepen, Tibco)</button>
333        <button onclick="myRotator5.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
334        <button onclick="myRotator5.go(3);">Goto 3 (Sun, Google)</button>
335        <button onclick="myRotator5.go(4);">Goto 4 (Aptana, AOL)</button>
336        <button onclick="myRotator5.go(5);">Goto 5 (IBM, Zend)</button>
337        <button onclick="myRotator5.go(6);">Goto 6 (BEA, Uxebu)</button>
338        <button onclick="myRotator5.go(7);">Goto 7 (WaveMaker, Aptana)</button>
339        </p>
340       
341        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator5"
342                 data-dojo-props="transition: 'dojox.widget.rotator.pan', transitionParams: 'continuous:true,wrap:true,quick:true,duration:1000'">
343                <div class="pane">
344                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
345                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
346                </div>
347                <div class="pane">
348                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
349                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
350                </div>
351                <div class="pane">
352                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
353                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
354                </div>
355                <div class="pane">
356                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
357                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
358                </div>
359                <div class="pane">
360                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
361                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
362                </div>
363                <div class="pane">
364                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
365                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
366                </div>
367                <div class="pane">
368                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
369                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
370                </div>
371                <div class="pane">
372                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
373                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
374                </div>
375        </div>
376
377        <h2>PanFade Transition</h2>
378       
379        <p>
380        <button onclick="myRotatorPanFade.prev();">Prev</button>
381        <button onclick="myRotatorPanFade.next();">Next</button>
382        <button onclick="myRotatorPanFade.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
383        <button onclick="myRotatorPanFade.go(1);">Goto 1 (Sitepen, Tibco)</button>
384        <button onclick="myRotatorPanFade.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
385        <button onclick="myRotatorPanFade.go(3);">Goto 3 (Sun, Google)</button>
386        <button onclick="myRotatorPanFade.go(4);">Goto 4 (Aptana, AOL)</button>
387        <button onclick="myRotatorPanFade.go(5);">Goto 5 (IBM, Zend)</button>
388        <button onclick="myRotatorPanFade.go(6);">Goto 6 (BEA, Uxebu)</button>
389        <button onclick="myRotatorPanFade.go(7);">Goto 7 (WaveMaker, Aptana)</button>
390        </p>
391       
392        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotatorPanFade"
393                 data-dojo-props="transition: 'dojox.widget.rotator.panFade'">
394                <div class="pane">
395                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
396                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
397                </div>
398                <div class="pane">
399                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
400                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
401                </div>
402                <div class="pane">
403                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
404                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
405                </div>
406                <div class="pane">
407                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
408                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
409                </div>
410                <div class="pane">
411                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
412                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
413                </div>
414                <div class="pane">
415                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
416                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
417                </div>
418                <div class="pane">
419                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
420                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
421                </div>
422                <div class="pane">
423                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
424                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
425                </div>
426        </div>
427
428        <h2>PanFade Continuous Transition</h2>
429       
430        <p>
431        <button onclick="myRotatorPanFadeCont.prev();">Prev</button>
432        <button onclick="myRotatorPanFadeCont.next();">Next</button>
433        <button onclick="myRotatorPanFadeCont.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
434        <button onclick="myRotatorPanFadeCont.go(1);">Goto 1 (Sitepen, Tibco)</button>
435        <button onclick="myRotatorPanFadeCont.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
436        <button onclick="myRotatorPanFadeCont.go(3);">Goto 3 (Sun, Google)</button>
437        <button onclick="myRotatorPanFadeCont.go(4);">Goto 4 (Aptana, AOL)</button>
438        <button onclick="myRotatorPanFadeCont.go(5);">Goto 5 (IBM, Zend)</button>
439        <button onclick="myRotatorPanFadeCont.go(6);">Goto 6 (BEA, Uxebu)</button>
440        <button onclick="myRotatorPanFadeCont.go(7);">Goto 7 (WaveMaker, Aptana)</button>
441        </p>
442       
443        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotatorPanFadeCont"
444                 data-dojo-props="transition: 'dojox.widget.rotator.panFade', transitionParams: 'continuous:true,wrap:true,quick:true,duration:1000'">
445                <div class="pane">
446                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
447                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
448                </div>
449                <div class="pane">
450                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
451                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
452                </div>
453                <div class="pane">
454                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
455                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
456                </div>
457                <div class="pane">
458                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
459                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
460                </div>
461                <div class="pane">
462                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
463                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
464                </div>
465                <div class="pane">
466                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
467                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
468                </div>
469                <div class="pane">
470                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
471                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
472                </div>
473                <div class="pane">
474                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
475                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
476                </div>
477        </div>
478
479        <h2>Pan Transition with Easing</h2>
480       
481        <p>
482        <button onclick="myRotator6.prev();">Prev</button>
483        <button onclick="myRotator6.next();">Next</button>
484        <button onclick="myRotator6.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button>
485        <button onclick="myRotator6.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button>
486        <button onclick="myRotator6.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button>
487        <button onclick="myRotator6.go(3);">Goto 3 (Sun, Google) [pan up]</button>
488        </p>
489       
490        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator6"
491                 data-dojo-props="transition: 'dojox.widget.rotator.panLeft', transitionParams: 'easing: easing.cubicInOut'">
492                <div class="pane">
493                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
494                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
495                </div>
496                <div class="pane" transition="dojox.widget.rotator.panDown">
497                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
498                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
499                </div>
500                <div class="pane" transition="dojox.widget.rotator.panRight">
501                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
502                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
503                </div>
504                <div class="pane" transition="dojox.widget.rotator.panUp">
505                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
506                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
507                </div>
508        </div>
509
510        <h2>Pan Continuous Transition with Easing</h2>
511       
512        <p>Easing not supported with continuous pan... forces a linear easing.</p>
513       
514        <p>
515        <button onclick="myRotator7.prev();">Prev</button>
516        <button onclick="myRotator7.next();">Next</button>
517        <button onclick="myRotator7.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
518        <button onclick="myRotator7.go(1);">Goto 1 (Sitepen, Tibco)</button>
519        <button onclick="myRotator7.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
520        <button onclick="myRotator7.go(3);">Goto 3 (Sun, Google)</button>
521        <button onclick="myRotator7.go(4);">Goto 4 (Aptana, AOL)</button>
522        <button onclick="myRotator7.go(5);">Goto 5 (IBM, Zend)</button>
523        <button onclick="myRotator7.go(6);">Goto 6 (BEA, Uxebu)</button>
524        <button onclick="myRotator7.go(7);">Goto 7 (WaveMaker, Aptana)</button>
525        </p>
526       
527        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator7"
528                 data-dojo-props="transition: 'dojox.widget.rotator.pan', transitionParams: 'continuous:true,quick:true,duration:500,easing: easing.cubicInOut'">
529                <div class="pane">
530                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
531                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
532                </div>
533                <div class="pane">
534                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
535                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
536                </div>
537                <div class="pane">
538                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
539                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
540                </div>
541                <div class="pane">
542                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
543                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
544                </div>
545                <div class="pane">
546                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
547                        <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a>
548                </div>
549                <div class="pane">
550                        <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a>
551                        <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a>
552                </div>
553                <div class="pane">
554                        <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a>
555                        <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a>
556                </div>
557                <div class="pane">
558                        <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a>
559                        <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a>
560                </div>
561        </div>
562
563        <h2>Slide Transition</h2>
564       
565        <p>
566        <button onclick="myRotator8.prev();">Prev</button>
567        <button onclick="myRotator8.next();">Next</button>
568        <button onclick="myRotator8.go(0);">Goto 0 (Nexaweb, Renkoo) [slide left]</button>
569        <button onclick="myRotator8.go(1);">Goto 1 (Sitepen, Tibco) [slide down]</button>
570        <button onclick="myRotator8.go(2);">Goto 2 (Webtide, OpenLaszlo) [slide right]</button>
571        <button onclick="myRotator8.go(3);">Goto 3 (Sun, Google) [slide up]</button>
572        <button onclick="myRotator8.resize(500, 125);">Resize to 500 x 125</button>
573        <button onclick="myRotator8.resize(384, 90);">Resize to 384 x 90</button>
574        </p>
575       
576        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator8"
577                 data-dojo-props="transition: 'dojox.widget.rotator.slideLeft'">
578                <div class="pane" style="background-color:#fff799;">
579                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
580                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
581                </div>
582                <div class="pane" transition="dojox.widget.rotator.slideDown" style="background-color:#6dcff6;">
583                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
584                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
585                </div>
586                <div class="pane" transition="dojox.widget.rotator.slideRight" style="background-color:#c7b299;">
587                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
588                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
589                </div>
590                <div class="pane" transition="dojox.widget.rotator.slideUp" style="background-color:#f4cedf;">
591                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
592                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
593                </div>
594        </div>
595
596        <h2>Slide Transition with Easing</h2>
597       
598        <p>
599        <button onclick="myRotator9.prev();">Prev</button>
600        <button onclick="myRotator9.next();">Next</button>
601        <button onclick="myRotator9.go(0);">Goto 0 (Nexaweb, Renkoo) [slide left]</button>
602        <button onclick="myRotator9.go(1);">Goto 1 (Sitepen, Tibco) [slide down]</button>
603        <button onclick="myRotator9.go(2);">Goto 2 (Webtide, OpenLaszlo) [slide right]</button>
604        <button onclick="myRotator9.go(3);">Goto 3 (Sun, Google) [slide up]</button>
605        </p>
606       
607        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator9"
608                 data-dojo-props="transition: 'dojox.widget.rotator.slideLeft', transitionParams: 'duration:1000, easing: easing.cubicInOut'">
609                <div class="pane" style="background-color:#fff799;">
610                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
611                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
612                </div>
613                <div class="pane" transition="dojox.widget.rotator.slideDown" style="background-color:#6dcff6;">
614                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
615                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
616                </div>
617                <div class="pane" transition="dojox.widget.rotator.slideRight" style="background-color:#c7b299;">
618                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
619                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
620                </div>
621                <div class="pane" transition="dojox.widget.rotator.slideUp" style="background-color:#f4cedf;">
622                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
623                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
624                </div>
625        </div>
626
627        <h2>Wipe Transition</h2>
628       
629        <p>
630        <button onclick="myRotator10.prev();">Prev</button>
631        <button onclick="myRotator10.next();">Next</button>
632        <button onclick="myRotator10.go(0);">Goto 0 (Nexaweb, Renkoo) [wipe left]</button>
633        <button onclick="myRotator10.go(1);">Goto 1 (Sitepen, Tibco) [wipe down]</button>
634        <button onclick="myRotator10.go(2);">Goto 2 (Webtide, OpenLaszlo) [wipe right]</button>
635        <button onclick="myRotator10.go(3);">Goto 3 (Sun, Google) [wipe up]</button>
636        </p>
637       
638        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator10"
639                 data-dojo-props="transition: 'dojox.widget.rotator.wipeLeft'">
640                <div class="pane" style="background-color:#fff799;">
641                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
642                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
643                </div>
644                <div class="pane" transition="dojox.widget.rotator.wipeDown" style="background-color:#6dcff6;">
645                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
646                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
647                </div>
648                <div class="pane" transition="dojox.widget.rotator.wipeRight" style="background-color:#c7b299;">
649                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
650                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
651                </div>
652                <div class="pane" transition="dojox.widget.rotator.wipeUp" style="background-color:#f4cedf;">
653                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
654                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
655                </div>
656        </div>
657       
658        <h2>Wipe Transition with Easing</h2>
659       
660        <p>
661        <button onclick="myRotator11.prev();">Prev</button>
662        <button onclick="myRotator11.next();">Next</button>
663        <button onclick="myRotator11.go(0);">Goto 0 (Nexaweb, Renkoo) [wipe left]</button>
664        <button onclick="myRotator11.go(1);">Goto 1 (Sitepen, Tibco) [wipe down]</button>
665        <button onclick="myRotator11.go(2);">Goto 2 (Webtide, OpenLaszlo) [wipe right]</button>
666        <button onclick="myRotator11.go(3);">Goto 3 (Sun, Google) [wipe up]</button>
667        </p>
668       
669        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator11"
670                 data-dojo-props="transition: 'dojox.widget.rotator.wipeLeft', transitionParams: 'duration:500, easing: easing.cubicInOut'">
671                <div class="pane" style="background-color:#fff799;">
672                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
673                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
674                </div>
675                <div class="pane" transition="dojox.widget.rotator.wipeDown" style="background-color:#6dcff6;">
676                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
677                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
678                </div>
679                <div class="pane" transition="dojox.widget.rotator.wipeRight" style="background-color:#c7b299;">
680                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
681                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
682                </div>
683                <div class="pane" transition="dojox.widget.rotator.wipeUp" style="background-color:#f4cedf;">
684                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
685                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
686                </div>
687        </div>
688
689        <h2>Declarative Event Hooks</h2>
690       
691        <p>The 2nd pane will output when the onBeforeIn/Out and onAfterIn/Out events are fired.</p>
692       
693        <p>
694        <button onclick="myRotator12.prev();">Prev</button>
695        <button onclick="myRotator12.next();">Next</button>
696        <button onclick="myRotator12.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button>
697        <button onclick="myRotator12.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button>
698        <button onclick="myRotator12.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button>
699        <button onclick="myRotator12.go(3);">Goto 3 (Sun, Google) [pan up]</button>
700        </p>
701       
702        <table><tr><td>
703       
704                <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator12"
705                         data-dojo-props="transition: 'dojox.widget.rotator.panLeft'">
706                        <div class="pane">
707                                <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
708                                <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
709                        </div>
710                        <div class="pane" transition="dojox.widget.rotator.panDown">
711                                <script type="dojo/method" data-dojo-event="onBeforeIn" data-dojo-args="args">
712                                        log("myRotator12Log", "onBeforeIn - get dom nodes ready to be displayed, wire events");
713                                </script>
714                                <script type="dojo/method" data-dojo-event="onAfterIn" data-dojo-args="args">
715                                        log("myRotator12Log", "onAfterIn - this pane is now visible, so do cool stuff!");
716                                </script>
717                                <script type="dojo/method" data-dojo-event="onBeforeOut" data-dojo-args="args">
718                                        log("myRotator12Log", "onBeforeOut - stop any animations, disconnect events, etc");
719                                </script>
720                                <script type="dojo/method" data-dojo-event="onAfterOut" data-dojo-args="args">
721                                        log("myRotator12Log", "onAfterOut - clean up dom, reset state, disconnect events, etc");
722                                </script>
723                                <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
724                                <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
725                        </div>
726                        <div class="pane" transition="dojox.widget.rotator.panRight">
727                                <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
728                                <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
729                        </div>
730                        <div class="pane" transition="dojox.widget.rotator.panUp">
731                                <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
732                                <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
733                        </div>
734                </div>
735       
736        </td><td>
737                <div class="logWindow" id="myRotator12Log"></div>
738        </td></tr></table>
739       
740        <h2>Programmatic Example with Fade Transition</h2>
741       
742        <p>
743        <button onclick="dojo.publish('myRotator13/rotator/control', ['prev']);">Prev</button>
744        <button onclick="dojo.publish('myRotator13/rotator/control', ['next']);">Next</button>
745        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 0]);">Goto 0 (Nexaweb, Renkoo)</button>
746        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 1]);">Goto 1 (Sitepen, Tibco)</button>
747        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 2]);">Goto 2 (Webtide, OpenLaszlo)</button>
748        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 3]);">Goto 3 (Sun, Google)</button>
749        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 4]);">Goto 4 (Aptana, AOL)</button>
750        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 5]);">Goto 5 (IBM, Zend)</button>
751        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 6]);">Goto 6 (BEA, Uxebu)</button>
752        <button onclick="dojo.publish('myRotator13/rotator/control', ['go', 7]);">Goto 7 (WaveMaker, Aptana)</button>
753        </p>
754
755        <div class="rotator" id="myRotator13"></div>
756       
757        <h2>Stacked Example: Pan Rotator Over Crossfade Rotator</h2>
758       
759        <p>
760        <button onclick="myRotator3_3.prev();myRotator3_4.prev();">Prev</button>
761        <button onclick="myRotator3_3.next();myRotator3_4.next();">Next</button>
762        <button onclick="myRotator3_3.go(0);myRotator3_4.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
763        <button onclick="myRotator3_3.go(1);myRotator3_4.go(1);">Goto 1 (Sitepen, Tibco)</button>
764        <button onclick="myRotator3_3.go(2);myRotator3_4.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
765        <button onclick="myRotator3_3.go(3);myRotator3_4.go(3);">Goto 3 (Sun, Google)</button>
766        </p>
767
768        <div class="rotator" style="position:relative;">
769                <div data-dojo-type="dojox/widget/Rotator" class="rotatorStacked" style="z-index:100;" data-dojo-id="myRotator3_3"
770                         data-dojo-props="transition: 'dojox.widget.rotator.panLeft'">
771                        <div class="pane">
772                                <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
773                                <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
774                        </div>
775                        <div class="pane" transition="dojox.widget.rotator.panDown">
776                                <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
777                                <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
778                        </div>
779                        <div class="pane" transition="dojox.widget.rotator.panRight">
780                                <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
781                                <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
782                        </div>
783                        <div class="pane" transition="dojox.widget.rotator.panUp">
784                                <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
785                                <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
786                        </div>
787                </div>
788                <div data-dojo-type="dojox/widget/Rotator" class="rotatorStacked" style="z-index:50;" data-dojo-id="myRotator3_4" transition="dojox.widget.rotator.crossFade">
789                        <div class="pane" style="background-color:red;"></div>
790                        <div class="pane" style="background-color:yellow;"></div>
791                        <div class="pane" style="background-color:green;"></div>
792                        <div class="pane" style="background-color:blue;"></div>
793                </div>
794        </div>
795       
796        <h2>Bad Global Transition</h2>
797       
798        <p>Uses a transtion "dojox.widget.rotator.doesNotExist" and should default to the swap transition.</p>
799       
800        <p>
801        <button onclick="myRotator14.prev();">Prev</button>
802        <button onclick="myRotator14.next();">Next</button>
803        <button onclick="myRotator14.go(0);">Goto 0 (Nexaweb, Renkoo)</button>
804        <button onclick="myRotator14.go(1);">Goto 1 (Sitepen, Tibco)</button>
805        <button onclick="myRotator14.go(2);">Goto 2 (Webtide, OpenLaszlo)</button>
806        <button onclick="myRotator14.go(3);">Goto 3 (Sun, Google)</button>
807        </p>
808       
809        <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator14"
810                 data-dojo-props="transition: 'dojox.widget.rotator.doesNotExist'">
811                <div class="pane">
812                        <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a>
813                        <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a>
814                </div>
815                <div class="pane">
816                        <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>
817                        <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>
818                </div>
819                <div class="pane">
820                        <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>
821                        <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>
822                </div>
823                <div class="pane">
824                        <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>
825                        <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>
826                </div>
827        </div>
828
829</body>
830</html>
Note: See TracBrowser for help on using the repository browser.