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.
366 lines
10 KiB
366 lines
10 KiB
<!DOCTYPE HTML> |
|
<html> |
|
<head> |
|
<title>dojox.widget.rotator.Controller 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; |
|
} |
|
.pane{ |
|
background-color:#fff; |
|
width:384px; |
|
height:90px; |
|
overflow:hidden; |
|
} |
|
td{ |
|
padding-right:15px; |
|
vertical-align:top; |
|
} |
|
|
|
/* test 1 styles */ |
|
.test1 .dojoxRotatorSelected{ |
|
background-color:#e5e5e5; |
|
font-weight:bold; |
|
} |
|
|
|
/* test 2 styles */ |
|
.test2 .rotatorContainer{ |
|
width:384px; |
|
height:110px; |
|
position:relative; |
|
} |
|
.test2 .rotator{ |
|
background-color:#e5e5e5; |
|
border:solid 1px #ccc; |
|
position:relative; |
|
top:20px; |
|
left:0; |
|
z-index:10; |
|
} |
|
.test2 .pane{ |
|
background-color:#e5e5e5; |
|
} |
|
|
|
.test2 .tabs{ |
|
position:absolute; |
|
top:0; |
|
left:0; |
|
z-index:20; |
|
} |
|
.test2 .tabs ul{ |
|
margin:0; |
|
padding:0; |
|
} |
|
.test2 .tabs li{ |
|
float:left; |
|
list-style:none; |
|
margin:0 5px 0 0; |
|
padding:0; |
|
} |
|
.test2 .tabs li a{ |
|
background-color:#fff; |
|
border-top-left-radius:5px; |
|
border-top-right-radius:5px; |
|
-moz-border-radius-topleft:5px; |
|
-moz-border-radius-topright:5px; |
|
border:solid 1px #ccc; |
|
border-bottom:0; |
|
color:#666; |
|
display:block; |
|
font-size:10px; |
|
height:20px; |
|
padding:0 4px; |
|
text-decoration:none; |
|
} |
|
.test2 .tabs li.dojoxRotatorSelected a{ |
|
background-color:#e5e5e5; |
|
color:#000; |
|
} |
|
|
|
.test2 .dots{ |
|
position:absolute; |
|
right:5px; |
|
top:25px; |
|
z-index:20; |
|
} |
|
.test2 .dots ul{ |
|
margin:0; |
|
padding:0; |
|
} |
|
.test2 .dots li{ |
|
float:left; |
|
list-style:none; |
|
margin:0; |
|
padding:0; |
|
} |
|
.test2 .dots a span{ |
|
display:none; |
|
} |
|
.test2 .dots .dojoxRotatorNumber a{ |
|
display:block; |
|
width:10px; |
|
height:10px; |
|
background:url(images/rotator_dots.png) no-repeat 0 0; |
|
} |
|
.test2 .dots .dojoxRotatorSelected a{ |
|
background:url(images/rotator_dots.png) no-repeat 0 -10px; |
|
} |
|
|
|
.test2 .pager1{ |
|
background:url(images/rotator_bg.gif) no-repeat 0 0; |
|
bottom:5px; |
|
padding:3px 0 0 12px; |
|
position:absolute; |
|
left:5px; |
|
z-index:20; |
|
} |
|
.test2 .pager1 ul{ |
|
height:16px; |
|
margin:0; |
|
padding:0; |
|
width:97px; |
|
} |
|
.test2 .pager1 li{ |
|
float:left; |
|
line-height:12px; |
|
list-style:none; |
|
margin:0; |
|
padding:0; |
|
} |
|
.test2 .pager1 a{ |
|
color:#fff; |
|
font-size:10px; |
|
text-decoration:none; |
|
} |
|
.test2 .pager1 li.dojoxRotatorIcon a{ |
|
display:block; |
|
width:14px; |
|
height:14px; |
|
} |
|
.test2 .pager1 li.dojoxRotatorPrev a{ |
|
background:url(images/rotator_icons.gif) no-repeat 0 0; |
|
} |
|
.test2 .pager1 li.dojoxRotatorPrev a span, |
|
.test2 .pager1 li.dojoxRotatorNext a span{ |
|
display:none; |
|
} |
|
.test2 .pager1 li.dojoxRotatorNext a{ |
|
background:url(images/rotator_icons.gif) no-repeat -14px 0; |
|
} |
|
.test2 .pager1 li.dojoxRotatorNumber a{ |
|
color:#ccc; |
|
padding:0 4px; |
|
} |
|
.test2 .pager1 li.dojoxRotatorSelected a{ |
|
color:#fff; |
|
font-weight:bold; |
|
} |
|
|
|
.test2 .pager2{ |
|
background:url(images/rotator_bg.gif) no-repeat 0 0; |
|
bottom:5px; |
|
padding:3px 0 0 12px; |
|
position:absolute; |
|
right:5px; |
|
z-index:20; |
|
} |
|
.test2 .pager2 ul{ |
|
height:16px; |
|
margin:0; |
|
padding:0; |
|
width:97px; |
|
} |
|
.test2 .pager2 li{ |
|
float:left; |
|
list-style:none; |
|
margin:0; |
|
padding:0; |
|
} |
|
.test2 .pager2 li.dojoxRotatorIcon a{ |
|
display:block; |
|
width:14px; |
|
height:14px; |
|
} |
|
.test2 .pager2 li.dojoxRotatorPrev a{ |
|
background:url(images/rotator_icons.gif) no-repeat 0 0; |
|
} |
|
.test2 .pager2 li.dojoxRotatorPlay a{ |
|
background:url(images/rotator_icons.gif) no-repeat -28px 0; |
|
} |
|
.test2 .pager2 li.dojoxRotatorPause a{ |
|
background:url(images/rotator_icons.gif) no-repeat -42px 0; |
|
} |
|
.test2 .pager2 li.dojoxRotatorNext a{ |
|
background:url(images/rotator_icons.gif) no-repeat -14px 0; |
|
} |
|
.test2 .pager2 li.dojoxRotatorInfo{ |
|
color:#e5e5e5; |
|
font-size:10px; |
|
line-height:12px; |
|
padding:0 4px 0 7px; |
|
width:32px; |
|
} |
|
.test2 .pager2 li a span{ |
|
display:none; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, selectorEngine:'acme'"></script> |
|
<script type="text/javascript"> |
|
require([ |
|
"dojo/parser", |
|
"dojox/widget/AutoRotator", |
|
"dojox/widget/rotator/Controller", |
|
"dojox/widget/rotator/Fade", |
|
"dojox/widget/rotator/Pan", |
|
"dojo/domReady!" |
|
], function(parser) { |
|
parser.parse() |
|
}) |
|
</script> |
|
</head> |
|
<body> |
|
|
|
<h1 class="testTitle">dojox.widget.rotator.Controller Test</h1> |
|
|
|
<h2>Controller Commands Test</h2> |
|
|
|
<div class="test1"> |
|
|
|
<div data-dojo-type="dojox.widget.AutoRotator" class="rotator" |
|
data-dojo-id="myRotator" |
|
data-dojo-props="duration: 1000, transition: 'dojox.widget.rotator.crossFade'"> |
|
<div class="pane" title="Nexaweb/Renkoo"> |
|
<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" title="Sitepen/Tibco"> |
|
<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" title="Webtide/OpenLaszlo"> |
|
<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" title="Sun/Google"> |
|
<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" title="Aptana/AOL"> |
|
<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" title="IBM/Zend"> |
|
<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" title="BEA/Uxebu"> |
|
<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"> <!-- no title for testing --> |
|
<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> |
|
|
|
<table> |
|
<tr> |
|
<td> |
|
<h3>Default</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator"></div> |
|
</td> |
|
<td> |
|
<h3>Prev, Next</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'prev,next'"></div> |
|
</td> |
|
<td> |
|
<h3>Prev, Play/Pause, Next</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'prev,play/pause,next'"></div> |
|
</td> |
|
<td> |
|
<h3>Prev, Numbers, Next</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'prev,#,next'"></div> |
|
</td> |
|
<td> |
|
<h3>Titles</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'titles'"></div> |
|
<div>Note: Last pane has no title and<br>uses default/</div> |
|
</td> |
|
<td> |
|
<h3>Play/Pause, Info</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'play/pause,info'"></div> |
|
</td> |
|
<td> |
|
<h3>Numbers, Info</h3> |
|
<div data-dojo-type="dojox.widget.rotator.Controller" |
|
data-dojo-props="rotator: myRotator, commands: '#,info'"></div> |
|
</td> |
|
<td> |
|
<h3>Info</h3> |
|
<div data-dojo-type="dojox/widget/rotator/Controller" |
|
data-dojo-props="rotator: myRotator, commands: 'info'"></div> |
|
</td> |
|
</tr> |
|
</table> |
|
|
|
</div> |
|
|
|
<h2>Styled Controllers</h2> |
|
|
|
<div class="test2"> |
|
|
|
<div class="rotatorContainer"> |
|
|
|
<div data-dojo-type="dojox/widget/AutoRotator" class="rotator" |
|
data-dojo-id="myRotator2" |
|
data-dojo-props="duration: 1000, transition: 'dojox.widget.rotator.pan', transitionParams: 'quick:true,continuous:true,pauseOnManualChange:true,suspendOnHover:true'"> |
|
<div class="pane" title="Nexaweb/Renkoo"> |
|
<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" title="Sitepen/Tibco"> |
|
<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" title="Webtide/OpenLaszlo"> |
|
<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" title="Sun/Google"> |
|
<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/Controller" class="tabs" |
|
data-dojo-props="rotator: myRotator2, commands: 'titles'"></div> |
|
|
|
<div data-dojo-type="dojox/widget/rotator/Controller" class="dots" |
|
data-dojo-props="rotator: myRotator2, commands: '#'"></div> |
|
|
|
<div data-dojo-type="dojox/widget/rotator/Controller" class="pager1" |
|
data-dojo-props="rotator: myRotator2, commands: 'prev,#,next'"></div> |
|
|
|
<div data-dojo-type="dojox/widget/rotator/Controller" class="pager2" |
|
data-dojo-props="rotator: myRotator2, commands: 'prev,play/pause,info,next'"></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|