Updated
This commit is contained in:
Éric Lemoine
346
master/examples/test_RotatorController.html
Normal file
346
master/examples/test_RotatorController.html
Normal file
@@ -0,0 +1,346 @@
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<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" djConfig="parseOnLoad:true, isDebug:true"></script>
|
||||
<script type="text/javascript">
|
||||
dojo.require("dojo.parser");
|
||||
dojo.require("dojox.widget.AutoRotator");
|
||||
dojo.require("dojox.widget.rotator.Controller");
|
||||
dojo.require("dojox.widget.rotator.Fade");
|
||||
dojo.require("dojox.widget.rotator.Pan");
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="testTitle">dojox.widget.rotator.Controller Test</h1>
|
||||
|
||||
<h2>Controller Commands Test</h2>
|
||||
|
||||
<div class="test1">
|
||||
|
||||
<div dojoType="dojox.widget.AutoRotator" class="rotator" jsId="myRotator" 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 dojoType="dojox.widget.rotator.Controller" rotator="myRotator"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Prev, Next</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="prev,next"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Prev, Play/Pause, Next</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="prev,play/pause,next"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Prev, Numbers, Next</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="prev,#,next"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Titles</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" 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 dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="play/pause,info"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Numbers, Info</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="#,info"></div>
|
||||
</td>
|
||||
<td>
|
||||
<h3>Info</h3>
|
||||
<div dojoType="dojox.widget.rotator.Controller" rotator="myRotator" commands="info"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<h2>Styled Controllers</h2>
|
||||
|
||||
<div class="test2">
|
||||
|
||||
<div class="rotatorContainer">
|
||||
|
||||
<div dojoType="dojox.widget.AutoRotator" class="rotator" jsId="myRotator2" 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 dojoType="dojox.widget.rotator.Controller" class="tabs" rotator="myRotator2" commands="titles"></div>
|
||||
|
||||
<div dojoType="dojox.widget.rotator.Controller" class="dots" rotator="myRotator2" commands="#"></div>
|
||||
|
||||
<div dojoType="dojox.widget.rotator.Controller" class="pager1" rotator="myRotator2" commands="prev,#,next"></div>
|
||||
|
||||
<div dojoType="dojox.widget.rotator.Controller" class="pager2" rotator="myRotator2" commands="prev,play/pause,info,next"></div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user