You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
895 lines
48 KiB
895 lines
48 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<title>dojox.widget.Rotator Test</title> |
|
<style type="text/css"> |
|
@import "../../../dojo/resources/dojo.css"; |
|
@import "../../../dijit/tests/css/dijitTests.css"; |
|
|
|
.rotator{ |
|
background-color:#fff; |
|
border:solid 1px #e5e5e5; |
|
width:384px; |
|
height:90px; |
|
overflow:hidden; |
|
} |
|
.rotatorStacked{ |
|
width:384px; |
|
height:90px; |
|
overflow:hidden; |
|
position:absolute; |
|
left:0; |
|
top:0; |
|
} |
|
.rotatorStacked .pane{ |
|
background-color:transparent; |
|
} |
|
.pane{ |
|
background-color:#fff; |
|
width:384px; |
|
height:90px; |
|
overflow:hidden; |
|
} |
|
.logWindow{ |
|
border:solid 1px #e5e5e5; |
|
margin-left:20px; |
|
width:400px; |
|
height:90px; |
|
overflow:auto; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" |
|
data-dojo-config="async: true, selectorEngine:'acme'"></script> |
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/parser", |
|
"dojo/_base/html", |
|
"dojo/dom", |
|
"dojox/widget/Rotator", |
|
"dojo/fx/easing", |
|
"dojo/domReady!", |
|
"dojox/widget/rotator/Fade", |
|
"dojox/widget/rotator/Pan", |
|
"dojox/widget/rotator/PanFade", |
|
"dojox/widget/rotator/Slide", |
|
"dojox/widget/rotator/Wipe" |
|
], function(parser, html, dom, Rotator, e) { |
|
|
|
// Set global variable used in transitionParams |
|
easing = e; |
|
|
|
parser.parse(); |
|
|
|
log = function(id, msg){ |
|
var e = dom.byId(id); |
|
e.innerHTML += msg + "<br>"; |
|
e.scrollTop = 9999; |
|
}; |
|
|
|
// programmatic example |
|
var contributors = [ |
|
[ "http://www.nexaweb.com", "nexaweb.png", "Nexaweb" ], |
|
[ "http://www.renkoo.com", "renkoo.png", "Renkoo" ], |
|
[ "http://www.sitepen.com", "sitepen.png", "Sitepen" ], |
|
[ "http://www.tibco.com", "tibco.png", "Tibco" ], |
|
[ "http://www.webtide.com", "webtide.png", "Webtide" ], |
|
[ "http://www.openlaszlo.com", "openlaszlo.png", "OpenLaszlo" ], |
|
[ "http://www.sun.com", "sun.png", "Sun" ], |
|
[ "http://www.google.com", "google.png", "Google" ], |
|
[ "http://www.aptana.com", "aptana.png", "Aptana" ], |
|
[ "http://www.aol.com", "aol.png", "AOL" ], |
|
[ "http://www.ibm.com", "ibm.png", "IBM" ], |
|
[ "http://www.zend.com", "zend.png", "Zend" ], |
|
[ "http://www.bea.com", "bea.png", "BEA" ], |
|
[ "http://www.uxebu.com", "uxebu.png", "Uxebu" ], |
|
[ "http://www.wavemaker.com", "wavemaker.png", "WaveMaker" ], |
|
[ "http://www.aptana.com", "aptana.png", "Aptana" ] |
|
]; |
|
|
|
var panes = []; |
|
for(var i=0; i<contributors.length; i++){ |
|
var html = '<a href="' + contributors[i][0] + '" target="_new"><img src="images/rotator_' |
|
+ contributors[i][1] + '" width="130" alt="' + contributors[i][2] + '"/></a>'; |
|
if(i % 2 == 0){ |
|
panes.push({ |
|
className: "pane", |
|
innerHTML: html |
|
}); |
|
}else{ |
|
panes[panes.length-1].innerHTML += html |
|
} |
|
} |
|
|
|
var r = new Rotator({ |
|
id: "myRotator13", |
|
duration: 2000, |
|
transition: "dojox.widget.rotator.fade", |
|
panes: panes |
|
}, |
|
dom.byId("myRotator13") |
|
); |
|
}) |
|
</script> |
|
</head> |
|
<body> |
|
|
|
<h1 class="testTitle">dojox.widget.Rotator Test</h1> |
|
|
|
<h2>Controlled By Topics, Default Swap Transition</h2> |
|
|
|
<p> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['prev']);">Prev</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['next']);">Next</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 0]);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 1]);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 2]);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 3]);">Goto 3 (Sun, Google)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 4]);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 5]);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 6]);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 7]);">Goto 7 (WaveMaker, Aptana)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['go', 8]);">Goto 8 (bad)</button> |
|
<button onclick="dojo.publish('myRotator/rotator/control', ['test']);">Bad Action</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" id="myRotator"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Controlled By data-dojo-id Reference, Default Swap Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotator2.prev();">Prev</button> |
|
<button onclick="myRotator2.next();">Next</button> |
|
<button onclick="myRotator2.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator2.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator2.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator2.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotator2.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotator2.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotator2.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotator2.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
<button onclick="myRotator2.go(8);">Goto 8 (bad)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator2"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Crossfade Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotator3.prev();">Prev</button> |
|
<button onclick="myRotator3.next();">Next</button> |
|
<button onclick="myRotator3.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator3.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator3.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator3.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotator3.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotator3.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotator3.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotator3.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator3" |
|
data-dojo-props="transition: 'dojox.widget.rotator.crossFade'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Crossfade Transition 2</h2> |
|
|
|
<p> |
|
<button onclick="myRotator3_2.prev();">Prev</button> |
|
<button onclick="myRotator3_2.next();">Next</button> |
|
<button onclick="myRotator3_2.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator3_2.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator3_2.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator3_2.go(3);">Goto 3 (Sun, Google)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator3_2" |
|
data-dojo-props="transition: 'dojox.widget.rotator.crossFade'"> |
|
<div class="pane" style="background-color:red;"></div> |
|
<div class="pane" style="background-color:yellow;"></div> |
|
<div class="pane" style="background-color:green;"></div> |
|
<div class="pane" style="background-color:blue;"></div> |
|
</div> |
|
|
|
<h2>Pan Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotator4.prev();">Prev</button> |
|
<button onclick="myRotator4.next();">Next</button> |
|
<button onclick="myRotator4.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button> |
|
<button onclick="myRotator4.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button> |
|
<button onclick="myRotator4.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button> |
|
<button onclick="myRotator4.go(3);">Goto 3 (Sun, Google) [pan up]</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator4" |
|
data-dojo-props="transition: 'dojox.widget.rotator.panLeft'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panDown"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panRight"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panUp"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Pan Continuous Transition</h2> |
|
|
|
<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> |
|
<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> |
|
|
|
<p> |
|
<button onclick="myRotator5.prev();">Prev</button> |
|
<button onclick="myRotator5.next();">Next</button> |
|
<button onclick="myRotator5.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator5.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator5.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator5.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotator5.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotator5.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotator5.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotator5.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator5" |
|
data-dojo-props="transition: 'dojox.widget.rotator.pan', transitionParams: 'continuous:true,wrap:true,quick:true,duration:1000'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>PanFade Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotatorPanFade.prev();">Prev</button> |
|
<button onclick="myRotatorPanFade.next();">Next</button> |
|
<button onclick="myRotatorPanFade.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotatorPanFade.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotatorPanFade.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotatorPanFade.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotatorPanFade.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotatorPanFade.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotatorPanFade.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotatorPanFade.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotatorPanFade" |
|
data-dojo-props="transition: 'dojox.widget.rotator.panFade'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>PanFade Continuous Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotatorPanFadeCont.prev();">Prev</button> |
|
<button onclick="myRotatorPanFadeCont.next();">Next</button> |
|
<button onclick="myRotatorPanFadeCont.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotatorPanFadeCont.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotatorPanFadeCont.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotatorPanFadeCont.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotatorPanFadeCont.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotatorPanFadeCont.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotatorPanFadeCont.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotatorPanFadeCont.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotatorPanFadeCont" |
|
data-dojo-props="transition: 'dojox.widget.rotator.panFade', transitionParams: 'continuous:true,wrap:true,quick:true,duration:1000'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Pan Transition with Easing</h2> |
|
|
|
<p> |
|
<button onclick="myRotator6.prev();">Prev</button> |
|
<button onclick="myRotator6.next();">Next</button> |
|
<button onclick="myRotator6.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button> |
|
<button onclick="myRotator6.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button> |
|
<button onclick="myRotator6.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button> |
|
<button onclick="myRotator6.go(3);">Goto 3 (Sun, Google) [pan up]</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator6" |
|
data-dojo-props="transition: 'dojox.widget.rotator.panLeft', transitionParams: 'easing: easing.cubicInOut'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panDown"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panRight"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panUp"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Pan Continuous Transition with Easing</h2> |
|
|
|
<p>Easing not supported with continuous pan... forces a linear easing.</p> |
|
|
|
<p> |
|
<button onclick="myRotator7.prev();">Prev</button> |
|
<button onclick="myRotator7.next();">Next</button> |
|
<button onclick="myRotator7.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator7.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator7.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator7.go(3);">Goto 3 (Sun, Google)</button> |
|
<button onclick="myRotator7.go(4);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="myRotator7.go(5);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="myRotator7.go(6);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="myRotator7.go(7);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator7" |
|
data-dojo-props="transition: 'dojox.widget.rotator.pan', transitionParams: 'continuous:true,quick:true,duration:500,easing: easing.cubicInOut'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
<a href="http://www.aol.com" target="_new"><img src="images/rotator_aol.png" width="130" alt="AOL"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.ibm.com" target="_new"><img src="images/rotator_ibm.png" width="100" alt="IBM"/></a> |
|
<a href="http://www.zend.com/" target="_new"><img src="images/rotator_zend.png" width="130" alt="Zend"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.bea.com" target="_new"><img src="images/rotator_bea.png" width="80" alt="BEA"/></a> |
|
<a href="http://www.uxebu.com" target="_new"><img src="images/rotator_uxebu.png" width="120" alt="Uxebu"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.wavemaker.com" target="_new"><img src="images/rotator_wavemaker.png" width="130" alt="WaveMaker"/></a> |
|
<a href="http://www.aptana.com" target="_new"><img src="images/rotator_aptana.png" width="130" alt="Aptana"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Slide Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotator8.prev();">Prev</button> |
|
<button onclick="myRotator8.next();">Next</button> |
|
<button onclick="myRotator8.go(0);">Goto 0 (Nexaweb, Renkoo) [slide left]</button> |
|
<button onclick="myRotator8.go(1);">Goto 1 (Sitepen, Tibco) [slide down]</button> |
|
<button onclick="myRotator8.go(2);">Goto 2 (Webtide, OpenLaszlo) [slide right]</button> |
|
<button onclick="myRotator8.go(3);">Goto 3 (Sun, Google) [slide up]</button> |
|
<button onclick="myRotator8.resize(500, 125);">Resize to 500 x 125</button> |
|
<button onclick="myRotator8.resize(384, 90);">Resize to 384 x 90</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator8" |
|
data-dojo-props="transition: 'dojox.widget.rotator.slideLeft'"> |
|
<div class="pane" style="background-color:#fff799;"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideDown" style="background-color:#6dcff6;"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideRight" style="background-color:#c7b299;"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideUp" style="background-color:#f4cedf;"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Slide Transition with Easing</h2> |
|
|
|
<p> |
|
<button onclick="myRotator9.prev();">Prev</button> |
|
<button onclick="myRotator9.next();">Next</button> |
|
<button onclick="myRotator9.go(0);">Goto 0 (Nexaweb, Renkoo) [slide left]</button> |
|
<button onclick="myRotator9.go(1);">Goto 1 (Sitepen, Tibco) [slide down]</button> |
|
<button onclick="myRotator9.go(2);">Goto 2 (Webtide, OpenLaszlo) [slide right]</button> |
|
<button onclick="myRotator9.go(3);">Goto 3 (Sun, Google) [slide up]</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator9" |
|
data-dojo-props="transition: 'dojox.widget.rotator.slideLeft', transitionParams: 'duration:1000, easing: easing.cubicInOut'"> |
|
<div class="pane" style="background-color:#fff799;"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideDown" style="background-color:#6dcff6;"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideRight" style="background-color:#c7b299;"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.slideUp" style="background-color:#f4cedf;"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Wipe Transition</h2> |
|
|
|
<p> |
|
<button onclick="myRotator10.prev();">Prev</button> |
|
<button onclick="myRotator10.next();">Next</button> |
|
<button onclick="myRotator10.go(0);">Goto 0 (Nexaweb, Renkoo) [wipe left]</button> |
|
<button onclick="myRotator10.go(1);">Goto 1 (Sitepen, Tibco) [wipe down]</button> |
|
<button onclick="myRotator10.go(2);">Goto 2 (Webtide, OpenLaszlo) [wipe right]</button> |
|
<button onclick="myRotator10.go(3);">Goto 3 (Sun, Google) [wipe up]</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator10" |
|
data-dojo-props="transition: 'dojox.widget.rotator.wipeLeft'"> |
|
<div class="pane" style="background-color:#fff799;"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeDown" style="background-color:#6dcff6;"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeRight" style="background-color:#c7b299;"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeUp" style="background-color:#f4cedf;"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Wipe Transition with Easing</h2> |
|
|
|
<p> |
|
<button onclick="myRotator11.prev();">Prev</button> |
|
<button onclick="myRotator11.next();">Next</button> |
|
<button onclick="myRotator11.go(0);">Goto 0 (Nexaweb, Renkoo) [wipe left]</button> |
|
<button onclick="myRotator11.go(1);">Goto 1 (Sitepen, Tibco) [wipe down]</button> |
|
<button onclick="myRotator11.go(2);">Goto 2 (Webtide, OpenLaszlo) [wipe right]</button> |
|
<button onclick="myRotator11.go(3);">Goto 3 (Sun, Google) [wipe up]</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator11" |
|
data-dojo-props="transition: 'dojox.widget.rotator.wipeLeft', transitionParams: 'duration:500, easing: easing.cubicInOut'"> |
|
<div class="pane" style="background-color:#fff799;"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeDown" style="background-color:#6dcff6;"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeRight" style="background-color:#c7b299;"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.wipeUp" style="background-color:#f4cedf;"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<!-- |
|
TODO: Declarative event hooks as implemented here don't work. They're intended to be handled by dojox/widget/Rotator, but |
|
the syntax here is setup for dojo/parser. The example here actually causes an error in dojo/parser because the script tags |
|
aren't direct children of a node with a data-dojo-type. |
|
--> |
|
|
|
<!-- <h2>Declarative Event Hooks</h2> --> |
|
|
|
<!-- <p>The 2nd pane will output when the onBeforeIn/Out and onAfterIn/Out events are fired.</p> --> |
|
|
|
<!-- <p> --> |
|
<!-- <button onclick="myRotator12.prev();">Prev</button> --> |
|
<!-- <button onclick="myRotator12.next();">Next</button> --> |
|
<!-- <button onclick="myRotator12.go(0);">Goto 0 (Nexaweb, Renkoo) [pan left]</button> --> |
|
<!-- <button onclick="myRotator12.go(1);">Goto 1 (Sitepen, Tibco) [pan down]</button> --> |
|
<!-- <button onclick="myRotator12.go(2);">Goto 2 (Webtide, OpenLaszlo) [pan right]</button> --> |
|
<!-- <button onclick="myRotator12.go(3);">Goto 3 (Sun, Google) [pan up]</button> --> |
|
<!-- </p> --> |
|
|
|
<!-- <table><tr><td> --> |
|
|
|
<!-- <div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator12" --> |
|
<!-- data-dojo-props="transition: 'dojox.widget.rotator.panLeft'"> --> |
|
<!-- <div class="pane"> --> |
|
<!-- <a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> --> |
|
<!-- <a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> --> |
|
<!-- </div> --> |
|
<!-- <div class="pane" transition="dojox.widget.rotator.panDown"> --> |
|
<!-- <script type="dojo/method" data-dojo-event="onBeforeIn" data-dojo-args="args"> --> |
|
<!-- log("myRotator12Log", "onBeforeIn - get dom nodes ready to be displayed, wire events"); --> |
|
<!-- </script> --> |
|
<!-- <script type="dojo/method" data-dojo-event="onAfterIn" data-dojo-args="args"> --> |
|
<!-- log("myRotator12Log", "onAfterIn - this pane is now visible, so do cool stuff!"); --> |
|
<!-- </script> --> |
|
<!-- <script type="dojo/method" data-dojo-event="onBeforeOut" data-dojo-args="args"> --> |
|
<!-- log("myRotator12Log", "onBeforeOut - stop any animations, disconnect events, etc"); --> |
|
<!-- </script> --> |
|
<!-- <script type="dojo/method" data-dojo-event="onAfterOut" data-dojo-args="args"> --> |
|
<!-- log("myRotator12Log", "onAfterOut - clean up dom, reset state, disconnect events, etc"); --> |
|
<!-- </script> --> |
|
<!-- <a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> --> |
|
<!-- <a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> --> |
|
<!-- </div> --> |
|
<!-- <div class="pane" transition="dojox.widget.rotator.panRight"> --> |
|
<!-- <a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> --> |
|
<!-- <a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> --> |
|
<!-- </div> --> |
|
<!-- <div class="pane" transition="dojox.widget.rotator.panUp"> --> |
|
<!-- <a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> --> |
|
<!-- <a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> --> |
|
<!-- </div> --> |
|
<!-- </div> --> |
|
|
|
<!-- </td><td> --> |
|
<!-- <div class="logWindow" id="myRotator12Log"></div> --> |
|
<!-- </td></tr></table> --> |
|
|
|
<h2>Programmatic Example with Fade Transition</h2> |
|
|
|
<p> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['prev']);">Prev</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['next']);">Next</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 0]);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 1]);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 2]);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 3]);">Goto 3 (Sun, Google)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 4]);">Goto 4 (Aptana, AOL)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 5]);">Goto 5 (IBM, Zend)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 6]);">Goto 6 (BEA, Uxebu)</button> |
|
<button onclick="dojo.publish('myRotator13/rotator/control', ['go', 7]);">Goto 7 (WaveMaker, Aptana)</button> |
|
</p> |
|
|
|
<div class="rotator" id="myRotator13"></div> |
|
|
|
<h2>Stacked Example: Pan Rotator Over Crossfade Rotator</h2> |
|
|
|
<p> |
|
<button onclick="myRotator3_3.prev();myRotator3_4.prev();">Prev</button> |
|
<button onclick="myRotator3_3.next();myRotator3_4.next();">Next</button> |
|
<button onclick="myRotator3_3.go(0);myRotator3_4.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator3_3.go(1);myRotator3_4.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator3_3.go(2);myRotator3_4.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator3_3.go(3);myRotator3_4.go(3);">Goto 3 (Sun, Google)</button> |
|
</p> |
|
|
|
<div class="rotator" style="position:relative;"> |
|
<div data-dojo-type="dojox/widget/Rotator" class="rotatorStacked" style="z-index:100;" data-dojo-id="myRotator3_3" |
|
data-dojo-props="transition: 'dojox.widget.rotator.panLeft'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panDown"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panRight"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane" transition="dojox.widget.rotator.panUp"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
<div data-dojo-type="dojox/widget/Rotator" class="rotatorStacked" style="z-index:50;" data-dojo-id="myRotator3_4" transition="dojox.widget.rotator.crossFade"> |
|
<div class="pane" style="background-color:red;"></div> |
|
<div class="pane" style="background-color:yellow;"></div> |
|
<div class="pane" style="background-color:green;"></div> |
|
<div class="pane" style="background-color:blue;"></div> |
|
</div> |
|
</div> |
|
|
|
<h2>Bad Global Transition</h2> |
|
|
|
<p>Uses a transtion "dojox.widget.rotator.doesNotExist" and should default to the swap transition.</p> |
|
|
|
<p> |
|
<button onclick="myRotator14.prev();">Prev</button> |
|
<button onclick="myRotator14.next();">Next</button> |
|
<button onclick="myRotator14.go(0);">Goto 0 (Nexaweb, Renkoo)</button> |
|
<button onclick="myRotator14.go(1);">Goto 1 (Sitepen, Tibco)</button> |
|
<button onclick="myRotator14.go(2);">Goto 2 (Webtide, OpenLaszlo)</button> |
|
<button onclick="myRotator14.go(3);">Goto 3 (Sun, Google)</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator14" |
|
data-dojo-props="transition: 'dojox.widget.rotator.doesNotExist'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a> |
|
<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a> |
|
<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a> |
|
</div> |
|
<div class="pane"> |
|
<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a> |
|
<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a> |
|
</div> |
|
</div> |
|
|
|
<h2>Insertion and removal</h2> |
|
|
|
<p>Inserts and removes panes.</p> |
|
|
|
<script> |
|
function myRotator15Insert(index) { |
|
var child = document.createElement('div'); |
|
child.className = 'pane'; |
|
switch (myRotator15Inserted) { |
|
case 0: |
|
child.innerHTML = '<a href="http://www.sitepen.com" target="_new"><img src="images/rotator_sitepen.png" width="130" alt="Sitepen"/></a>' + |
|
'<a href="http://www.tibco.com" target="_new"><img src="images/rotator_tibco.png" width="130" alt="Tibco"/></a>'; |
|
break; |
|
case 1: |
|
child.innerHTML = '<a href="http://www.webtide.com/" target="_new"><img src="images/rotator_webtide.png" width="130" alt="Webtide"/></a>' + |
|
'<a href="http://www.openlaszlo.com" target="_new"><img src="images/rotator_openlaszlo.png" width="150" alt="OpenLaszlo"/></a>'; |
|
break; |
|
case 2: |
|
child.innerHTML = '<a href="http://www.sun.com" target="_new"><img src="images/rotator_sun.png" width="130" alt="Sun"/></a>' + |
|
'<a href="http://www.google.com" target="_new"><img src="images/rotator_google.png" width="130" alt="Google"/></a>'; |
|
break; |
|
} |
|
myRotator15.insert(child, index); |
|
myRotator15Inserted = (myRotator15Inserted + 1) % 3 |
|
} |
|
|
|
// Remove the first item by index |
|
function myRotator15RemoveByIndex() { |
|
myRotator15.remove(0); |
|
} |
|
|
|
// Remove the first item by node |
|
function myRotator15RemoveByNode() { |
|
var firstPane = myRotator15.panes[0]; |
|
if (firstPane) { |
|
myRotator15.remove(firstPane.node); |
|
} |
|
} |
|
|
|
var myRotator15Inserted = 0; |
|
</script> |
|
|
|
<p> |
|
<button onclick="myRotator15.prev();">Prev</button> |
|
<button onclick="myRotator15.next();">Next</button> |
|
<button onclick="myRotator15Insert();">Append</button> |
|
<button onclick="myRotator15Insert(1);">Insert</button> |
|
<button onclick="myRotator15RemoveByIndex();">Remove by Index</button> |
|
<button onclick="myRotator15RemoveByNode();">Remove by Node</button> |
|
</p> |
|
|
|
<div data-dojo-type="dojox/widget/Rotator" class="rotator" data-dojo-id="myRotator15" |
|
data-dojo-props="transition: 'dojox.widget.rotator.crossFade'"> |
|
<div class="pane"> |
|
<a href="http://www.nexaweb.com" target="_new"><img src="images/rotator_nexaweb.png" width="130" alt="Nexaweb"/></a> |
|
<a href="http://www.renkoo.com" target="_new"><img src="images/rotator_renkoo.png" width="130" alt="Renkoo"/></a> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|