| 1 | <!DOCTYPE HTML> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>dojox.widget.rotator.Controller 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 | .pane{ |
|---|
| 17 | background-color:#fff; |
|---|
| 18 | width:384px; |
|---|
| 19 | height:90px; |
|---|
| 20 | overflow:hidden; |
|---|
| 21 | } |
|---|
| 22 | td{ |
|---|
| 23 | padding-right:15px; |
|---|
| 24 | vertical-align:top; |
|---|
| 25 | } |
|---|
| 26 | |
|---|
| 27 | /* test 1 styles */ |
|---|
| 28 | .test1 .dojoxRotatorSelected{ |
|---|
| 29 | background-color:#e5e5e5; |
|---|
| 30 | font-weight:bold; |
|---|
| 31 | } |
|---|
| 32 | |
|---|
| 33 | /* test 2 styles */ |
|---|
| 34 | .test2 .rotatorContainer{ |
|---|
| 35 | width:384px; |
|---|
| 36 | height:110px; |
|---|
| 37 | position:relative; |
|---|
| 38 | } |
|---|
| 39 | .test2 .rotator{ |
|---|
| 40 | background-color:#e5e5e5; |
|---|
| 41 | border:solid 1px #ccc; |
|---|
| 42 | position:relative; |
|---|
| 43 | top:20px; |
|---|
| 44 | left:0; |
|---|
| 45 | z-index:10; |
|---|
| 46 | } |
|---|
| 47 | .test2 .pane{ |
|---|
| 48 | background-color:#e5e5e5; |
|---|
| 49 | } |
|---|
| 50 | |
|---|
| 51 | .test2 .tabs{ |
|---|
| 52 | position:absolute; |
|---|
| 53 | top:0; |
|---|
| 54 | left:0; |
|---|
| 55 | z-index:20; |
|---|
| 56 | } |
|---|
| 57 | .test2 .tabs ul{ |
|---|
| 58 | margin:0; |
|---|
| 59 | padding:0; |
|---|
| 60 | } |
|---|
| 61 | .test2 .tabs li{ |
|---|
| 62 | float:left; |
|---|
| 63 | list-style:none; |
|---|
| 64 | margin:0 5px 0 0; |
|---|
| 65 | padding:0; |
|---|
| 66 | } |
|---|
| 67 | .test2 .tabs li a{ |
|---|
| 68 | background-color:#fff; |
|---|
| 69 | border-top-left-radius:5px; |
|---|
| 70 | border-top-right-radius:5px; |
|---|
| 71 | -moz-border-radius-topleft:5px; |
|---|
| 72 | -moz-border-radius-topright:5px; |
|---|
| 73 | border:solid 1px #ccc; |
|---|
| 74 | border-bottom:0; |
|---|
| 75 | color:#666; |
|---|
| 76 | display:block; |
|---|
| 77 | font-size:10px; |
|---|
| 78 | height:20px; |
|---|
| 79 | padding:0 4px; |
|---|
| 80 | text-decoration:none; |
|---|
| 81 | } |
|---|
| 82 | .test2 .tabs li.dojoxRotatorSelected a{ |
|---|
| 83 | background-color:#e5e5e5; |
|---|
| 84 | color:#000; |
|---|
| 85 | } |
|---|
| 86 | |
|---|
| 87 | .test2 .dots{ |
|---|
| 88 | position:absolute; |
|---|
| 89 | right:5px; |
|---|
| 90 | top:25px; |
|---|
| 91 | z-index:20; |
|---|
| 92 | } |
|---|
| 93 | .test2 .dots ul{ |
|---|
| 94 | margin:0; |
|---|
| 95 | padding:0; |
|---|
| 96 | } |
|---|
| 97 | .test2 .dots li{ |
|---|
| 98 | float:left; |
|---|
| 99 | list-style:none; |
|---|
| 100 | margin:0; |
|---|
| 101 | padding:0; |
|---|
| 102 | } |
|---|
| 103 | .test2 .dots a span{ |
|---|
| 104 | display:none; |
|---|
| 105 | } |
|---|
| 106 | .test2 .dots .dojoxRotatorNumber a{ |
|---|
| 107 | display:block; |
|---|
| 108 | width:10px; |
|---|
| 109 | height:10px; |
|---|
| 110 | background:url(images/rotator_dots.png) no-repeat 0 0; |
|---|
| 111 | } |
|---|
| 112 | .test2 .dots .dojoxRotatorSelected a{ |
|---|
| 113 | background:url(images/rotator_dots.png) no-repeat 0 -10px; |
|---|
| 114 | } |
|---|
| 115 | |
|---|
| 116 | .test2 .pager1{ |
|---|
| 117 | background:url(images/rotator_bg.gif) no-repeat 0 0; |
|---|
| 118 | bottom:5px; |
|---|
| 119 | padding:3px 0 0 12px; |
|---|
| 120 | position:absolute; |
|---|
| 121 | left:5px; |
|---|
| 122 | z-index:20; |
|---|
| 123 | } |
|---|
| 124 | .test2 .pager1 ul{ |
|---|
| 125 | height:16px; |
|---|
| 126 | margin:0; |
|---|
| 127 | padding:0; |
|---|
| 128 | width:97px; |
|---|
| 129 | } |
|---|
| 130 | .test2 .pager1 li{ |
|---|
| 131 | float:left; |
|---|
| 132 | line-height:12px; |
|---|
| 133 | list-style:none; |
|---|
| 134 | margin:0; |
|---|
| 135 | padding:0; |
|---|
| 136 | } |
|---|
| 137 | .test2 .pager1 a{ |
|---|
| 138 | color:#fff; |
|---|
| 139 | font-size:10px; |
|---|
| 140 | text-decoration:none; |
|---|
| 141 | } |
|---|
| 142 | .test2 .pager1 li.dojoxRotatorIcon a{ |
|---|
| 143 | display:block; |
|---|
| 144 | width:14px; |
|---|
| 145 | height:14px; |
|---|
| 146 | } |
|---|
| 147 | .test2 .pager1 li.dojoxRotatorPrev a{ |
|---|
| 148 | background:url(images/rotator_icons.gif) no-repeat 0 0; |
|---|
| 149 | } |
|---|
| 150 | .test2 .pager1 li.dojoxRotatorPrev a span, |
|---|
| 151 | .test2 .pager1 li.dojoxRotatorNext a span{ |
|---|
| 152 | display:none; |
|---|
| 153 | } |
|---|
| 154 | .test2 .pager1 li.dojoxRotatorNext a{ |
|---|
| 155 | background:url(images/rotator_icons.gif) no-repeat -14px 0; |
|---|
| 156 | } |
|---|
| 157 | .test2 .pager1 li.dojoxRotatorNumber a{ |
|---|
| 158 | color:#ccc; |
|---|
| 159 | padding:0 4px; |
|---|
| 160 | } |
|---|
| 161 | .test2 .pager1 li.dojoxRotatorSelected a{ |
|---|
| 162 | color:#fff; |
|---|
| 163 | font-weight:bold; |
|---|
| 164 | } |
|---|
| 165 | |
|---|
| 166 | .test2 .pager2{ |
|---|
| 167 | background:url(images/rotator_bg.gif) no-repeat 0 0; |
|---|
| 168 | bottom:5px; |
|---|
| 169 | padding:3px 0 0 12px; |
|---|
| 170 | position:absolute; |
|---|
| 171 | right:5px; |
|---|
| 172 | z-index:20; |
|---|
| 173 | } |
|---|
| 174 | .test2 .pager2 ul{ |
|---|
| 175 | height:16px; |
|---|
| 176 | margin:0; |
|---|
| 177 | padding:0; |
|---|
| 178 | width:97px; |
|---|
| 179 | } |
|---|
| 180 | .test2 .pager2 li{ |
|---|
| 181 | float:left; |
|---|
| 182 | list-style:none; |
|---|
| 183 | margin:0; |
|---|
| 184 | padding:0; |
|---|
| 185 | } |
|---|
| 186 | .test2 .pager2 li.dojoxRotatorIcon a{ |
|---|
| 187 | display:block; |
|---|
| 188 | width:14px; |
|---|
| 189 | height:14px; |
|---|
| 190 | } |
|---|
| 191 | .test2 .pager2 li.dojoxRotatorPrev a{ |
|---|
| 192 | background:url(images/rotator_icons.gif) no-repeat 0 0; |
|---|
| 193 | } |
|---|
| 194 | .test2 .pager2 li.dojoxRotatorPlay a{ |
|---|
| 195 | background:url(images/rotator_icons.gif) no-repeat -28px 0; |
|---|
| 196 | } |
|---|
| 197 | .test2 .pager2 li.dojoxRotatorPause a{ |
|---|
| 198 | background:url(images/rotator_icons.gif) no-repeat -42px 0; |
|---|
| 199 | } |
|---|
| 200 | .test2 .pager2 li.dojoxRotatorNext a{ |
|---|
| 201 | background:url(images/rotator_icons.gif) no-repeat -14px 0; |
|---|
| 202 | } |
|---|
| 203 | .test2 .pager2 li.dojoxRotatorInfo{ |
|---|
| 204 | color:#e5e5e5; |
|---|
| 205 | font-size:10px; |
|---|
| 206 | line-height:12px; |
|---|
| 207 | padding:0 4px 0 7px; |
|---|
| 208 | width:32px; |
|---|
| 209 | } |
|---|
| 210 | .test2 .pager2 li a span{ |
|---|
| 211 | display:none; |
|---|
| 212 | } |
|---|
| 213 | </style> |
|---|
| 214 | |
|---|
| 215 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, selectorEngine:'acme'"></script> |
|---|
| 216 | <script type="text/javascript"> |
|---|
| 217 | require([ |
|---|
| 218 | "dojo/parser", |
|---|
| 219 | "dojox/widget/AutoRotator", |
|---|
| 220 | "dojox/widget/rotator/Controller", |
|---|
| 221 | "dojox/widget/rotator/Fade", |
|---|
| 222 | "dojox/widget/rotator/Pan", |
|---|
| 223 | "dojo/domReady!" |
|---|
| 224 | ], function(parser) { |
|---|
| 225 | parser.parse() |
|---|
| 226 | }) |
|---|
| 227 | </script> |
|---|
| 228 | </head> |
|---|
| 229 | <body> |
|---|
| 230 | |
|---|
| 231 | <h1 class="testTitle">dojox.widget.rotator.Controller Test</h1> |
|---|
| 232 | |
|---|
| 233 | <h2>Controller Commands Test</h2> |
|---|
| 234 | |
|---|
| 235 | <div class="test1"> |
|---|
| 236 | |
|---|
| 237 | <div data-dojo-type="dojox.widget.AutoRotator" class="rotator" |
|---|
| 238 | data-dojo-id="myRotator" |
|---|
| 239 | data-dojo-props="duration: 1000, transition: 'dojox.widget.rotator.crossFade'"> |
|---|
| 240 | <div class="pane" title="Nexaweb/Renkoo"> |
|---|
| 241 | <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|---|
| 242 | <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|---|
| 243 | </div> |
|---|
| 244 | <div class="pane" title="Sitepen/Tibco"> |
|---|
| 245 | <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|---|
| 246 | <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|---|
| 247 | </div> |
|---|
| 248 | <div class="pane" title="Webtide/OpenLaszlo"> |
|---|
| 249 | <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|---|
| 250 | <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|---|
| 251 | </div> |
|---|
| 252 | <div class="pane" title="Sun/Google"> |
|---|
| 253 | <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|---|
| 254 | <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|---|
| 255 | </div> |
|---|
| 256 | <div class="pane" title="Aptana/AOL"> |
|---|
| 257 | <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|---|
| 258 | <a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|---|
| 259 | </div> |
|---|
| 260 | <div class="pane" title="IBM/Zend"> |
|---|
| 261 | <a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|---|
| 262 | <a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|---|
| 263 | </div> |
|---|
| 264 | <div class="pane" title="BEA/Uxebu"> |
|---|
| 265 | <a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|---|
| 266 | <a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|---|
| 267 | </div> |
|---|
| 268 | <div class="pane"> <!-- no title for testing --> |
|---|
| 269 | <a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|---|
| 270 | <a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|---|
| 271 | </div> |
|---|
| 272 | </div> |
|---|
| 273 | |
|---|
| 274 | <table> |
|---|
| 275 | <tr> |
|---|
| 276 | <td> |
|---|
| 277 | <h3>Default</h3> |
|---|
| 278 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 279 | data-dojo-props="rotator: myRotator"></div> |
|---|
| 280 | </td> |
|---|
| 281 | <td> |
|---|
| 282 | <h3>Prev, Next</h3> |
|---|
| 283 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 284 | data-dojo-props="rotator: myRotator, commands: 'prev,next'"></div> |
|---|
| 285 | </td> |
|---|
| 286 | <td> |
|---|
| 287 | <h3>Prev, Play/Pause, Next</h3> |
|---|
| 288 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 289 | data-dojo-props="rotator: myRotator, commands: 'prev,play/pause,next'"></div> |
|---|
| 290 | </td> |
|---|
| 291 | <td> |
|---|
| 292 | <h3>Prev, Numbers, Next</h3> |
|---|
| 293 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 294 | data-dojo-props="rotator: myRotator, commands: 'prev,#,next'"></div> |
|---|
| 295 | </td> |
|---|
| 296 | <td> |
|---|
| 297 | <h3>Titles</h3> |
|---|
| 298 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 299 | data-dojo-props="rotator: myRotator, commands: 'titles'"></div> |
|---|
| 300 | <div>Note: Last pane has no title and<br>uses default/</div> |
|---|
| 301 | </td> |
|---|
| 302 | <td> |
|---|
| 303 | <h3>Play/Pause, Info</h3> |
|---|
| 304 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 305 | data-dojo-props="rotator: myRotator, commands: 'play/pause,info'"></div> |
|---|
| 306 | </td> |
|---|
| 307 | <td> |
|---|
| 308 | <h3>Numbers, Info</h3> |
|---|
| 309 | <div data-dojo-type="dojox.widget.rotator.Controller" |
|---|
| 310 | data-dojo-props="rotator: myRotator, commands: '#,info'"></div> |
|---|
| 311 | </td> |
|---|
| 312 | <td> |
|---|
| 313 | <h3>Info</h3> |
|---|
| 314 | <div data-dojo-type="dojox/widget/rotator/Controller" |
|---|
| 315 | data-dojo-props="rotator: myRotator, commands: 'info'"></div> |
|---|
| 316 | </td> |
|---|
| 317 | </tr> |
|---|
| 318 | </table> |
|---|
| 319 | |
|---|
| 320 | </div> |
|---|
| 321 | |
|---|
| 322 | <h2>Styled Controllers</h2> |
|---|
| 323 | |
|---|
| 324 | <div class="test2"> |
|---|
| 325 | |
|---|
| 326 | <div class="rotatorContainer"> |
|---|
| 327 | |
|---|
| 328 | <div data-dojo-type="dojox/widget/AutoRotator" class="rotator" |
|---|
| 329 | data-dojo-id="myRotator2" |
|---|
| 330 | data-dojo-props="duration: 1000, transition: 'dojox.widget.rotator.pan', transitionParams: 'quick:true,continuous:true,pauseOnManualChange:true,suspendOnHover:true'"> |
|---|
| 331 | <div class="pane" title="Nexaweb/Renkoo"> |
|---|
| 332 | <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|---|
| 333 | <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|---|
| 334 | </div> |
|---|
| 335 | <div class="pane" title="Sitepen/Tibco"> |
|---|
| 336 | <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|---|
| 337 | <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|---|
| 338 | </div> |
|---|
| 339 | <div class="pane" title="Webtide/OpenLaszlo"> |
|---|
| 340 | <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|---|
| 341 | <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|---|
| 342 | </div> |
|---|
| 343 | <div class="pane" title="Sun/Google"> |
|---|
| 344 | <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|---|
| 345 | <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|---|
| 346 | </div> |
|---|
| 347 | </div> |
|---|
| 348 | |
|---|
| 349 | <div data-dojo-type="dojox/widget/rotator/Controller" class="tabs" |
|---|
| 350 | data-dojo-props="rotator: myRotator2, commands: 'titles'"></div> |
|---|
| 351 | |
|---|
| 352 | <div data-dojo-type="dojox/widget/rotator/Controller" class="dots" |
|---|
| 353 | data-dojo-props="rotator: myRotator2, commands: '#'"></div> |
|---|
| 354 | |
|---|
| 355 | <div data-dojo-type="dojox/widget/rotator/Controller" class="pager1" |
|---|
| 356 | data-dojo-props="rotator: myRotator2, commands: 'prev,#,next'"></div> |
|---|
| 357 | |
|---|
| 358 | <div data-dojo-type="dojox/widget/rotator/Controller" class="pager2" |
|---|
| 359 | data-dojo-props="rotator: myRotator2, commands: 'prev,play/pause,info,next'"></div> |
|---|
| 360 | |
|---|
| 361 | </div> |
|---|
| 362 | |
|---|
| 363 | </div> |
|---|
| 364 | |
|---|
| 365 | </body> |
|---|
| 366 | </html> |
|---|
