dojox/widget/Rotator (version 1.10)

Summary

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):

Usage

var foo = new Rotator(params,node);
dojox/widget/Rotator
Parameter Type Description
params Object
node DomNode | string

See the dojox/widget/Rotator reference documentation for more information.

Examples

Example 1

<div dojoType="dojox.widget.Rotator">
    <div>Pane 1!</div>
    <div>Pane 2!</div>
</div>

Example 2

<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>

Property Summary

  • panesArray of panes to be created in the Rotator.
  • transitionThe name of a function that is passed two panes nodes and a duration, then returns a dojo.Animation object.
  • transitionParamsParameters for the transition.

Method Summary

  • _resetWaitForEvent() If there is a waitForEvent pending, kill it.
  • control(action) Dispatches an action, first to this engine, then to the Rotator.
  • destroy() Destroys the Rotator and its DOM node.
  • go(p) Transitions the Rotator to the specified pane index.
  • next() Transitions the Rotator to the next pane.
  • prev() Transitions the Rotator to the previous pane.
  • resize(width,height)

Event Summary

  • onManualChange() Stub function that can be overriden or connected to.
  • onUpdate(type,params) Send a notification to all controllers with the state of the rotator.

Properties

panes
Defined by: dojox/widget/Rotator

Array of panes to be created in the Rotator. Each array element will be passed as attributes to a html.create() call.

transition
Defined by: dojox/widget/Rotator

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
Defined by: dojox/widget/Rotator

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.

Methods

_resetWaitForEvent()

If there is a waitForEvent pending, kill it.

control(action)

Dispatches an action, first to this engine, then to the Rotator.

Parameter Type Description
action string
destroy()

Destroys the Rotator and its DOM node.

go(p)

Transitions the Rotator to the specified pane index.

Parameter Type Description
p int | string
Optional
Returns:null
next()

Transitions the Rotator to the next pane.

Returns:undefined
prev()

Transitions the Rotator to the previous pane.

Returns:undefined
resize(width,height)
Parameter Type Description
width int
height int

Events

onManualChange()
Defined by: dojox/widget/Rotator

Stub function that can be overriden or connected to.

Examples

Example 1

<div dojoType="dojox.widget.Rotator">
    <div>Pane 1!</div>
    <div>Pane 2!</div>
</div>

Example 2

<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>
onUpdate(type,params)
Defined by: dojox/widget/Rotator

Send a notification to all controllers with the state of the rotator.

Parameter Type Description
type string
params object
Optional

Examples

Example 1

<div dojoType="dojox.widget.Rotator">
    <div>Pane 1!</div>
    <div>Pane 2!</div>
</div>

Example 2

<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>
Error in the documentation? Can’t find what you are looking for? Let us know!