dojox.widget.AutoRotator
益智明
A rotator that automatically transitions between child nodes.
Introduction
Adds automatic rotating to the 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.
Usage
| Parameter | Type | Description |
|---|---|---|
| suspendOnHover | boolean | Pause the rotator when the mouse hovers over it. The default value is “false”. |
| duration | int | The time in milliseconds before transitioning to the next pane. The default value is 4000 (4 seconds). |
| autoStart | boolean | Starts the timer to transition children upon creation. The default value is “true”. |
| 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”. |
| cycles | int | Number of cycles before pausing. By default, it will cycle indefinitely. |
| random | boolean | Determines if the panes should cycle randomly. The default value is “false”. |
| reverse | boolean | Causes the rotator to rotate in reverse order. The default value is “false”. |
Example:
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style type="text/css">
.rotator{
background-color:#fff;
border:solid 1px #e5e5e5;
width:400px;
height:180px;
overflow:hidden;
}
.pane{
background-color:#fff;
width:400px;
height:180px;
overflow:hidden;
padding: 10px;
}
.pane0{
background-color:#fff79e;
}
.pane1{
background-color:#ffd4a0;
}
.pane2{
background-color:#ffa0a0;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.AutoRotator");
dojo.require("dojox.widget.rotator.Fade");
dojo.ready(function(){
new dojox.widget.AutoRotator(
{
transition: "dojox.widget.rotator.fade",
duration: 2500,
pauseOnManualChange: true,
suspendOnHover: true,
panes: [
{ 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>" },
{ className: "pane pane1", innerHTML: "<h3>Dijit</h3><p>Dojo's themeable, accessible, easy-to-customize UI Library</p>" },
{ className: "pane pane2", innerHTML: "<h3>DojoX</h3><p>Dojo eXtensions</p>" }
]
},
dojo.byId("myAutoRotator1")
);
});
</script>
</head>
<body class="claro">
<div id="myAutoRotator1" class="rotator"></div>
<button οnclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">Prev</button>
<button οnclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">Next</button>
</body>
</html>Example of an AutoRotator that cycles to 4 random panes, then pauses.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<style type="text/css">
.rotator{
background-color:#fff;
border:solid 1px #e5e5e5;
width:400px;
height:100px;
overflow:hidden;
}
.pane{
background-color:#fff;
width:400px;
height:100px;
overflow:hidden;
}
.pane0{
background-color:#fff79e;
}
.pane1{
background-color:#ffd4a0;
}
.pane2{
background-color:#ffa0a0;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.AutoRotator");
dojo.require("dojox.widget.rotator.Fade");
</script>
</head>
<body class="claro">
<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">
<div class="pane pane0">Pane 0</div>
<div class="pane pane1">Pane 1</div>
<div class="pane pane2">Pane 2</div>
</div>
</body>
</html>
类似资料：