dojox.layout.RotatorContainer

Project owner:Chris Barber
since:V1.2

dojox.layout.RotatorContainer is an extended StackContainer that automatically crossfades between child panes and display navigation in the form of tabs or a pager.

Introduction

The RotatorContainer cycles through the child panes with a crossfade transition.

This widget is on the verge of being deprecated. It has been replaced by the dojox.widget.AutoRotator, a lightweight version that has more features and doesn't require dijit.

Usage

Since the RotatorContainer is a layout widget, it's children must be a layout widget such as a dijit.layout.ContentPane.

Parameter Type Description
showTabs boolean Sets the display of the tabs. The tabs are actually a StackController. The child's title is used for the tab's label. The default value is "true".
transitionDelay int The delay in milliseconds before transitioning to the next child. The default value is 5000 (5 seconds).
transition string The type of transition to perform when switching children. A null transition will transition instantly. The default value is "fade".
transitionDuration int The duration of the transition in milliseconds. The default value is 1000 (1 second).
autoStart boolean Starts the timer to transition children upon creation. The default value is "true".
suspendOnHover boolean Pause the rotator when the mouse hovers over it. The default value is "false".
pauseOnManualChange boolean Pause the rotator when the tab is changed or the pager's next/previous buttons are clicked.
reverse boolean Causes the rotator to rotate in reverse order. The default value is "false".
pagerId string ID the pager widget.
cycles int Number of cycles before pausing.
pagerClass string The declared Class of the Pager used for this widget. The default value is "dojox.layout.RotatorPager".

Examples

Declarative example

dojo.require("dojox.layout.RotatorContainer");
dojo.require("dijit.layout.ContentPane");
<div data-dojo-type="dojox.layout.RotatorContainer" id="myRotator" showTabs="true" autoStart="true" transitionDelay="5000">
  <div id="pane1" data-dojo-type="dijit.layout.ContentPane" title="1">
    Pane 1!
  </div>
  <div id="pane2" data-dojo-type="dijit.layout.ContentPane" title="2">
    Pane 2!
  </div>
  <div id="pane3" data-dojo-type="dijit.layout.ContentPane" title="3" transitionDelay="10000">
    Pane 3 with overridden transitionDelay!
  </div>
</div>

See also

  • dojox.widget.AutoRotator is a replacement widget for the RotatorContainer that is more lightweight and has more features.