A widget for rotating through child nodes using transitions.
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.
For best results, each rotator pane should be the same height and width as the Rotator container node and consider setting overflow to hidden. While the Rotator will accept any DOM node for a rotator pane, a block element or element with display:block is recommended.
Note: When the Rotator begins, it does not transition the first pane.
subscribed topics:
[id]/rotator/control - Controls the Rotator Parameters: - /*string*/ action - The name of a method of the Rotator to run - /*anything?*/ args - One or more arguments to pass to the action
published topics:
[id]/rotator/update - Notifies controllers that a pane or state has changed. Parameters:
declarative dojo/method events (per pane):
Parameter | Type | Description |
---|---|---|
params | Object | |
node | DomNode | string |
See the dojox/widget/Rotator reference documentation for more information.
<div dojoType="dojox.widget.Rotator"> <div>Pane 1!</div> <div>Pane 2!</div> </div>
<script type="text/javascript"> require("dojo/parser", "dojo/domReady!", "dojox/widget/Rotator", "dojox/widget/rotator/Fade"], function(parser) { parser.parse(); }); </script> <div dojoType="dojox/widget/Rotator" transition="dojox/widget/rotator/crossFade"> <div>Pane 1!</div> <div>Pane 2!</div> </div>
Array of panes to be created in the Rotator. Each array element will be passed as attributes to a html.create() call.
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".
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.
Dispatches an action, first to this engine, then to the Rotator.
Parameter | Type | Description |
---|---|---|
action | string |
Transitions the Rotator to the specified pane index.
Parameter | Type | Description |
---|---|---|
p | int | string |
Optional
|
Parameter | Type | Description |
---|---|---|
width | int | |
height | int |
Stub function that can be overriden or connected to.
<div dojoType="dojox.widget.Rotator"> <div>Pane 1!</div> <div>Pane 2!</div> </div>
<script type="text/javascript"> require("dojo/parser", "dojo/domReady!", "dojox/widget/Rotator", "dojox/widget/rotator/Fade"], function(parser) { parser.parse(); }); </script> <div dojoType="dojox/widget/Rotator" transition="dojox/widget/rotator/crossFade"> <div>Pane 1!</div> <div>Pane 2!</div> </div>
Send a notification to all controllers with the state of the rotator.
Parameter | Type | Description |
---|---|---|
type | string | |
params | object |
Optional
|
<div dojoType="dojox.widget.Rotator"> <div>Pane 1!</div> <div>Pane 2!</div> </div>
<script type="text/javascript"> require("dojo/parser", "dojo/domReady!", "dojox/widget/Rotator", "dojox/widget/rotator/Fade"], function(parser) { parser.parse(); }); </script> <div dojoType="dojox/widget/Rotator" transition="dojox/widget/rotator/crossFade"> <div>Pane 1!</div> <div>Pane 2!</div> </div>