dojox.widget.Rotator
柯曦
Introduction
A small, fast, extensible, awesome rotator that cycles, with transitions, through panes (child nodes) displaying only one at a time and ties into controllers used to change state.
The Rotator does not rely on Dijit. It is designed to be as lightweight as possible. Controllers and transitions have been externalized so builds can be as optimized with only the components you want to use.
Usage
| Parameter | Type | Description |
|---|---|---|
| transition | String | The name of a function that is passed two panes nodes and a duration, then returns a dojo.Animation object. The default value is “dojox.widget.rotator.swap”. |
| transitionParams | String | Parameters for the transition. The string is read in and eval’d as an object. If the duration is absent, the default value will be used. |
| panes | Array | Array of panes to be created in the Rotator. Each array element will be passed as attributes to a dojo.create() call. |
The Rotator should be declared using a block element such as a <div>. Direct descendant nodes are the panes to be rotated. The Rotator will accept any DOM node for a rotator pane, however a block element (such as <div> or <img>) or a element with display:block is recommended. For best results, each rotator pane should be the same height and width as the Rotator container node and consider setting overflow to hidden.
There may be z-index issues for complex layouts. The z-index of the current pane is 1 and the z-index of the pane that is about to be transitioned in is 2.
If the rotator node isn’t explicitly positioned, then it will automatically position the rotator node relative so that the panes can be positioned absolute.
You can do some interesting things by stacking multiple rotators on top of each other, then wiring up the topics so that they all transition at the same time.
Examples
<!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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
dojo.ready(function(){
new dojox.widget.Rotator(
{
transition: "dojox.widget.rotator.fade",
panes: [
{ className: "pane", innerHTML: "Pane 0" },
{ className: "pane", innerHTML: "Pane 1" },
{ className: "pane", innerHTML: "Pane 2" }
]
},
dojo.byId("myRotator1")
);
});
</script>
</head>
<body class="claro">
<div id="myRotator1" class="rotator"></div>
<button οnclick="dojo.publish('myRotator1/rotator/control', ['prev']);">Prev</button>
<button οnclick="dojo.publish('myRotator1/rotator/control', ['next']);">Next</button>
</body>
</html>example2
<!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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
dojo.ready(function(){
// add a 3rd pane
dojo.create("div", { className: "pane", innerHTML: "dynamically added Pane" }, "myRotator2");
new dojox.widget.Rotator(
{
transition: "dojox.widget.rotator.fade"
},
dojo.byId("myRotator2")
);
});
</script>
</head>
<body class="claro">
<div id="myRotator2" class="rotator">
<div class="pane">Pane 0</div>
<div class="pane">Pane 2</div>
<div class="pane">Pane 3</div>
<div class="pane">Pane 4</div>
<div class="pane">Pane 5</div>
<div class="pane">Pane 6</div>
</div>
<button οnclick="dojo.publish('myRotator2/rotator/control', ['prev']);">Prev</button>
<button οnclick="dojo.publish('myRotator2/rotator/control', ['next']);">Next</button>
</body>
</html>example3:
<!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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Rotator" class="rotator" id="myRotator3"
data-dojo-id="myRotatorInstance3" data-dojo-props="transition:'dojox.widget.rotator.crossFade'">
<div class="pane">Pane 0</div>
<div class="pane">Pane 1</div>
<div class="pane">Pane 2</div>
</div>
<button οnclick="myRotatorInstance3.prev();">Prev</button>
<button οnclick="myRotatorInstance3.next();">Next</button>
</body>
</html>example4:Example of using different transitions per pane.
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../../_static/js/dojo/../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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
dojo.require("dojox.widget.rotator.Pan");
dojo.require("dojox.widget.rotator.Slide");
dojo.require("dojox.widget.rotator.Wipe");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Rotator" class="rotator" id="myRotator4"
data-dojo-id="myRotatorInstance4" data-dojo-props="transition:'dojox.widget.rotator.crossFade'">
<div class="pane">Pane 0</div>
<div class="pane" transition="dojox.widget.rotator.panRight">Pane 1</div>
<div class="pane" transition="dojox.widget.rotator.slideLeft">Pane 2</div>
<div class="pane" transition="dojox.widget.rotator.wipeDown">Pane 3</div>
</div>
<button οnclick="myRotatorInstance4.prev();">Prev</button>
<button οnclick="myRotatorInstance4.next();">Next</button>
</body>
</html>example5:
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="../../_static/js/dojo/../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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Pan");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Rotator" class="rotator" id="myRotator5" data-dojo-id="myRotatorInstance5"
data-dojo-props="transition:'dojox.widget.rotator.pan', transitionParams:'continuous:true,quick:true,duration:500'">
<div class="pane">Pane 0</div>
<div class="pane">Pane 1</div>
<div class="pane">Pane 2</div>
<div class="pane">Pane 3</div>
<div class="pane">Pane 4</div>
</div>
<button οnclick="myRotatorInstance5.prev();">Prev</button>
<button οnclick="myRotatorInstance5.next();">Next</button>
</body>
</html>The Rotator subscribes to the following topic where the [id] is the id of the Rotator:
[id]/rotator/control
This allows you to publish to this topic and control the Rotator. It will invoke a method of the Rotator or subclass and allow you to pass in arguments.
Parameters
| Parameter | Type | Description |
|---|---|---|
| action | String | The name of a method of the Rotator to run such as "prev", "next", and "go". If the action is not a valid method of the Rotator or its subclass, then a warning is thrown to the console. |
| args | Anything | One or more arguments to pass to the action. If the action is "go", then you may pass in the number of the pane you want to go to. |
Example6
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Rotator" class="rotator" id="myRotator6"
data-dojo-props="transition:'dojox.widget.rotator.crossFade'">
<div class="pane">HaHa 0</div>
<div class="pane">XiXi 1</div>
<div class="pane">HeHe 2</div>
<div class="pane">HeiHei 3</div>
<div class="pane">Pane 4</div>
<div class="pane">Pane 5</div>
</div>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['prev']);">Prev</button>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['next']);">Next</button>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['go', 2]);">Goto Pane 2</button>
</body>
</html>Published Topics
The Rotator publishes the following topic where the [id] is the id of the Rotator:
[id]/rotator/update
By subscribing to this topic, you can hook into various events fired by the Rotator.
Parameters
| Parameter | Type | Description |
|---|---|---|
| type | String | The type of notification. |
| rotator | dojox.widget.Rotator | The instance of the Rotator. |
| params | Object? | Various parameters associated with the event. |
Example
<div data-dojo-type="dojox.widget.Rotator" id="myRotator"></div>
dojo.ready(function(){
dojo.subscribe("myrotator/rotator/update", function(type, rotator, params){
console.info("The rotator just published a '", type, "' message");
});
});
example7:
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="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;
}
</style>
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
dojo.require("dojox.widget.Rotator");
dojo.require("dojox.widget.rotator.Fade");
dojo.ready(function(){
dojo.subscribe("myRotator6/rotator/update", function(type, rotator, params){
console.info("The rotator just published a '", type, "' message");
});
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dojox.widget.Rotator" class="rotator" id="myRotator6"
data-dojo-props="transition:'dojox.widget.rotator.crossFade'">
<div class="pane">HaHa 0</div>
<div class="pane">XiXi 1</div>
<div class="pane">HeHe 2</div>
<div class="pane">HeiHei 3</div>
<div class="pane">Pane 4</div>
<div class="pane">Pane 5</div>
</div>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['prev']);">Prev</button>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['next']);">Next</button>
<button οnclick="dojo.publish('myRotator6/rotator/control', ['go', 2]);">Goto Pane 2</button>
</body>
</html>
Waiting for Event Topic
The Rotator contains plumbing for bypassing automated transitioning implemented by subclasses such as the dojox.widget.AutoRotator. It allows you to specify per pane the name of a topic to listen for before continuing to the next pane. Visit the dojox.widget.AutoRotator page for a code example.
类似资料：