Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 231 lines (184 sloc) 7.618 kB
fcc4fff @phiggins42 monster commit from moinconverter, which is always done prior to the …
phiggins42 authored
1 .. _dojox/widget/AutoRotator:
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
2
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
3 dojox.widget.AutoRotator
4 ========================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
5
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
6 :Authors: Chris Barber, Marcus Reimann
7 :Project owner: Chris Barber
8 :Available: since V1.4
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
9
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
10 .. contents::
11 :depth: 2
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
12
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
13 A rotator that automatically transitions between child nodes.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
14
15
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
16 ============
17 Introduction
18 ============
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
19
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
20 Adds automatic rotating to the :ref:`dojox.widget.Rotator <dojox/widget/Rotator>`. The AutoRotator has parameters that control how user input can affect the rotator including a suspend when hovering over the rotator and pausing when the user manually advances to another pane.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
21
22
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
23 =====
24 Usage
25 =====
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
26
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
27 =================== ======= ======================================================================
28 Parameter Type Description
29 =================== ======= ======================================================================
30 suspendOnHover boolean Pause the rotator when the mouse hovers over it. The default value is "false".
31 duration int The time in milliseconds before transitioning to the next pane. The default value is 4000 (4 seconds).
32 autoStart boolean Starts the timer to transition children upon creation. The default value is "true".
33 pauseOnManualChange boolean Pause the rotator when the pane is changed or a controller's next or previous buttons are clicked. The default value is "false".
34 cycles int Number of cycles before pausing. By default, it will cycle indefinitely.
35 random boolean Determines if the panes should cycle randomly. The default value is "false".
36 reverse boolean Causes the rotator to rotate in reverse order. The default value is "false".
37 =================== ======= ======================================================================
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
38
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
39 The AutoRotator follows the same general Guidelines as the :ref:`dojox.widget.Rotator <dojox/widget/Rotator>`.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
40
41
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
42 ========
43 Examples
44 ========
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
45
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
46 Programmatic example
47 --------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
48
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
49 Example showing how the AutoRotator can create the pane DOM nodes for you.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
50
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
51 .. code-example::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
52
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
53 .. css::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
54
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
55 <style type="text/css">
56 .rotator{
57 background-color:#fff;
58 border:solid 1px #e5e5e5;
59 width:400px;
60 height:180px;
61 overflow:hidden;
62 }
63 .pane{
64 background-color:#fff;
65 width:400px;
66 height:180px;
67 overflow:hidden;
68 padding: 10px;
69 }
70 .pane0{
71 background-color:#fff79e;
72 }
73 .pane1{
74 background-color:#ffd4a0;
75 }
76 .pane2{
77 background-color:#ffa0a0;
78 }
79 </style>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
80
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
81 .. javascript::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
82
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
83 <script type="text/javascript">
84 dojo.require("dojox.widget.AutoRotator");
85 dojo.require("dojox.widget.rotator.Fade");
49acd5c @wkeese change dojo.addOnLoad() --> dojo.ready(), except for:
wkeese authored
86 dojo.ready(function(){
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
87 new dojox.widget.AutoRotator(
88 {
89 transition: "dojox.widget.rotator.fade",
90 duration: 2500,
91 pauseOnManualChange: true,
92 suspendOnHover: true,
93 panes: [
94 { className: "pane pane0", innerHTML: "<h3>Dojo</h3><p>Tons of features like CSS-based queries, event handling, animations, Ajax, class-based programming, and a package system</p>" },
95 { className: "pane pane1", innerHTML: "<h3>Dijit</h3><p>Dojo's themeable, accessible, easy-to-customize UI Library</p>" },
96 { className: "pane pane2", innerHTML: "<h3>DojoX</h3><p>Dojo eXtensions</p>" }
97 ]
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
98
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
99 },
100 dojo.byId("myAutoRotator1")
101 );
102 });
103 </script>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
104
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
105 .. html::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
106
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
107 <div id="myAutoRotator1" class="rotator"></div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
108
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
109 <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">Prev</button>
110 <button onclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">Next</button>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
111
112
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
113 Declarative example
114 -------------------
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
115
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
116 Example of an AutoRotator that cycles to 4 random panes, then pauses.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
117
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
118 .. code-example::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
119
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
120 .. css::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
121
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
122 <style type="text/css">
123 .rotator{
124 background-color:#fff;
125 border:solid 1px #e5e5e5;
126 width:400px;
127 height:100px;
128 overflow:hidden;
129 }
130 .pane{
131 background-color:#fff;
132 width:400px;
133 height:100px;
134 overflow:hidden;
135 }
136 .pane0{
137 background-color:#fff79e;
138 }
139 .pane1{
140 background-color:#ffd4a0;
141 }
142 .pane2{
143 background-color:#ffa0a0;
144 }
145 </style>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
146
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
147 .. javascript::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
148
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
149 <script type="text/javascript">
150 dojo.require("dojox.widget.AutoRotator");
151 dojo.require("dojox.widget.rotator.Fade");
152 </script>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
153
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
154 .. html::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
155
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
156 <div data-dojo-type="dojox.widget.AutoRotator" data-dojo-props="transition:'dojox.widget.rotator.crossFade', duration:2500, random:true, cycles:4" class="rotator" id="myAutoRotator2" data-dojo-id="myAutoRotatorInstance2">
157 <div class="pane pane0">Pane 0</div>
158 <div class="pane pane1">Pane 1</div>
159 <div class="pane pane2">Pane 2</div>
160 </div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
161
162
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
163 Example of using the "wait for event" feature. The 2nd pane will wait for a event to be published by the button before proceeding.
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
164
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
165 .. code-example::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
166
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
167 .. css::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
168
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
169 <style type="text/css">
170 .rotator{
171 background-color:#fff;
172 border:solid 1px #e5e5e5;
173 width:400px;
174 height:180px;
175 overflow:hidden;
176 }
177 .pane{
178 background-color:#fff;
179 width:400px;
180 height:180px;
181 overflow:hidden;
182 padding: 10px;
183 }
184 .pane0{
185 background-color:#fff79e;
186 }
187 .pane1{
188 background-color:#ffd4a0;
189 }
190 .pane2{
191 background-color:#ffa0a0;
192 }
193 </style>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
194
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
195 .. javascript::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
196
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
197 <script type="text/javascript">
198 dojo.require("dojox.widget.AutoRotator");
199 dojo.require("dojox.widget.rotator.Fade");
200 </script>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
201
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
202 .. html::
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
203
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
204 <div data-dojo-type="dojox.widget.AutoRotator" data-dojo-props="duration:2000, transition:'dojox.widget.rotator.crossFade'" class="rotator" id="myAutoRotator3" data-dojo-id="myAutoRotatorInstance3">
205 <div class="pane pane0">
206 <h3>Dojo</h3>
207 <p>Tons of features like CSS-based queries, event handling, animations, Ajax, class-based programming, and a package system</p>
208 </div>
209 <div class="pane pane1" waitForEvent="myEvent">
210 <h3>Dijit</h3>
211 <p>Dojo's themeable, accessible, easy-to-customize UI Library</p>
212 <p><button onclick="dojo.publish('myEvent')">Continue!</button></p>
213 </div>
214 <div class="pane pane2">
215 <h3>DojoX</h3>
216 <p>Dojo eXtensions</p>
217 </div>
218 </div>
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
219
220
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
221 ========
222 See also
223 ========
d608cc5 @phiggins42 \r\n -> \n conversion.
phiggins42 authored
224
9dd52dc @phiggins42 mondo whitespace change
phiggins42 authored
225 * :ref:`dojox.widget.Rotator <dojox/widget/Rotator>` is the base class of the AutoRotator.
226 * :ref:`dojox.widget.rotator.Controller <dojox/widget/rotator/Controller>` manipulates a Rotator or AutoRotator.
227 * :ref:`dojox.widget.rotator.Fade <dojox/widget/rotator/Fade>` is a fade and crossfade transition for the Rotator.
228 * :ref:`dojox.widget.rotator.Pan <dojox/widget/rotator/Pan>` is a pan and continuous pan transition for the Rotator.
229 * :ref:`dojox.widget.rotator.Slide <dojox/widget/rotator/Slide>` is a sliding transition for the Rotator.
230 * :ref:`dojox.widget.rotator.Wipe <dojox/widget/rotator/Wipe>` is a wiping transition for the Rotator.
Something went wrong with that request. Please try again.