dojox/layout/RotatorContainer.js

• Provides:

  • dojox.layout.RotatorContainer

• Requires:

  • dojo.fx in common
  • dijit.layout.StackContainer in common
  • dijit.layout.StackController in common
  • dijit._Widget in common
  • dijit._Templated in common
  • dijit._Contained in common

• dojox.layout.RotatorContainer

  • type

    Function

  • chains:
    • dijit.layout.StackContainer: (prototype)
    • dijit._Templated.prototype: (prototype)
    • dijit.layout.StackContainer: (call)
    • dijit._Templated: (call)
  • summary

    Extends a StackContainer to automatically transition between children
    and display navigation in the form of tabs or a pager.

  • description

    The RotatorContainer cycles through the children with a transition.
    
    published topics:
    [widgetId]-update - Notifies pager(s) that a child has changed.
    Parameters:
    /*boolean*/ playing - true if playing, false if paused
    /*int*/ current     - current selected child
    /*int*/ total       - total number of children

  • example

    	<div dojoType="dojox.layout.RotatorContainer" id="myRotator" showTabs="true" autoStart="true" transitionDelay="5000">
    		<div id="pane1" dojoType="dijit.layout.ContentPane" title="1">
    			Pane 1!
    		</div>
    		<div id="pane2" dojoType="dijit.layout.ContentPane" title="2">
    			Pane 2!
    		</div>
    		<div id="pane3" dojoType="dijit.layout.ContentPane" title="3" transitionDelay="10000">
    			Pane 3 with overrided transitionDelay!
    		</div>
    	</div>

• dojox.layout.RotatorContainer.templateString

  • type

    String

• dojox.layout.RotatorContainer.showTabs

  • type

    Boolean

  • summary

    Sets the display of the tabs.  The tabs are actually a StackController.
    The child's title is used for the tab's label.

• dojox.layout.RotatorContainer.transitionDelay

  • type

    int

  • summary

    The delay in milliseconds before transitioning to the next child.

• dojox.layout.RotatorContainer.transition

  • type

    String

  • summary

    The type of transition to perform when switching children.
    A null transition will transition instantly.

• dojox.layout.RotatorContainer.transitionDuration

  • type

    int

  • summary

    The duration of the transition in milliseconds.

• dojox.layout.RotatorContainer.autoStart

  • type

    Boolean

  • summary

    Starts the timer to transition children upon creation.

• dojox.layout.RotatorContainer.suspendOnHover

  • type

    Boolean

  • summary

    Pause the rotator when the mouse hovers over it.

• dojox.layout.RotatorContainer.pauseOnManualChange

  • type

    Boolean

  • summary

    Pause the rotator when the tab is changed or the pager's next/previous
    buttons are clicked.

• dojox.layout.RotatorContainer.reverse

  • type

    Boolean

  • summary

    Causes the rotator to rotate in reverse order.

• dojox.layout.RotatorContainer.pagerId

  • type

    String

  • summary

    ID the pager widget.

• dojox.layout.RotatorContainer.cycles

  • type

    int

  • summary

    Number of cycles before pausing.

• dojox.layout.RotatorContainer.pagerClass

  • type

    String

  • summary

    The declared Class of the Pager used for this Widget

• dojox.layout.RotatorContainer.postCreate

  • summary

    Initializes the DOM nodes, tabs, and transition stuff.

  • type

    Function

• dojox.layout.RotatorContainer.id

  • type

    String

• dojox.layout.RotatorContainer.tabNode

• dojox.layout.RotatorContainer._stackController

• dojox.layout.RotatorContainer._subscriptions

  • type

    Array

• dojox.layout.RotatorContainer.startup

  • summary

    Initializes the pagers.

  • type

    Function

• dojox.layout.RotatorContainer.destroy

  • summary

    Unsubscribe to all of our topics

  • type

    Function

• dojox.layout.RotatorContainer._setShowTabsAttr

  • parameters:
    • value: (typeof anything)
  • type

    Function

• dojox.layout.RotatorContainer._updatePager

  • summary

    Notify the pager's current and total numbers.

  • type

    Function

• dojox.layout.RotatorContainer._onMouseOver

  • summary

    Triggered when the mouse is moved over the rotator container.

  • type

    Function

• dojox.layout.RotatorContainer._over

  • type

    bool

• dojox.layout.RotatorContainer._onMouseOut

  • summary

    Triggered when the mouse is moved off the rotator container.

  • type

    Function

• dojox.layout.RotatorContainer._timer

  • type

    Object

• dojox.layout.RotatorContainer._resetTimer

  • summary

    Resets the timer used to start the next transition.

  • type

    Function

• dojox.layout.RotatorContainer._cycle

  • parameters:
    • next: (typeof boolean)

      or int

  • summary

    Cycles to the next/previous child.

  • type

    Function

• dojox.layout.RotatorContainer._manualChange

  • summary

    This function is only called when a manual change occurs in which
    case we may need to stop playing and we need to reset the cycle counter

  • type

    Function

• dojox.layout.RotatorContainer._playing

  • type

    bool

• dojox.layout.RotatorContainer._play

  • parameters:
    • skip
  • summary

    Schedules the next transition.

  • type

    Function

• dojox.layout.RotatorContainer._pause

  • summary

    Clears the transition timer and pauses the rotator.

  • type

    Function

• dojox.layout.RotatorContainer._state

  • parameters:
    • playing
  • summary

    Fired when the play/pause pager button is toggled.

  • type

    Function

• dojox.layout.RotatorContainer._transition

  • parameters:
    • next: (typeof dijit._Widget)
    • prev: (typeof dijit._Widget)
  • summary

    Dispatches the appropriate transition.

  • type

    Function

• dojox.layout.RotatorContainer._transitionEnd

  • type

    Function

• dojox.layout.RotatorContainer._fade

  • parameters:
    • next: (typeof dijit._Widget)
    • prev: (typeof dijit._Widget)
  • summary

    Crossfades two children.

  • type

    Function

• dojox.layout.RotatorContainer._styleNode

  • parameters:
    • node: (typeof DOMnode)
    • opacity: (typeof number)
    • zIndex: (typeof int)
  • summary

    Helper function to style the children.

  • type

    Function

• dojox.layout.RotatorPager

  • type

    Function

  • chains:
    • dijit._Widget: (prototype)
    • dijit._Templated.prototype: (prototype)
    • dijit._Contained.prototype: (prototype)
    • dijit._Widget: (call)
    • dijit._Templated: (call)
    • dijit._Contained: (call)
  • summary

    Defines controls used to manipulate a RotatorContainer

  • description

    A pager can be defined one of two ways:
    * Externally of the RotatorContainer's template and tell the
    RotatorPager the rotatorId of the RotatorContainer
    * As a direct descendant of the RotatorContainer (i.e. inside the
    RotatorContainer's template)
    
    The pager can contain the following components:
    * Previous button
    - Must be a dijit.form.Button
    - dojoAttachPoint must be named "previous"
    * Next button
    - Must be a dijit.form.Button
    - dojoAttachPoint must be named "next"
    * Play/Pause toggle button
    - Must be a dijit.form.ToggleButton
    - dojoAttachPoint must be named "playPause"
    - Use iconClass to specify toggled state
    * Current child #
    - dojoAttachPoint must be named "current"
    * Total # of children
    - dojoAttachPoint must be named "total"
    
    You can choose to exclude specific controls as well as add elements
    for styling.
    
    Should you need a pager, but don't want to use Dijit buttons, you can
    write your own pager widget and just wire it into the topics.  The
    topic names are prefixed with the widget ID of the RotatorContainer.
    Notifications are received from and sent to the RotatorContainer as
    well as other RotatorPagers.
    
    published topics:
    [widgetId]-cycle - Notify that the next or previous button was pressed.
    Parameters:
    /*boolean*/ next - true if next, false if previous
    [widgetId]-state - Notify that the play/pause button was toggled.
    Parameters:
    /*boolean*/ playing - true if playing, false if paused

  • example

    A pager with the current/total children and previous/next buttons.
    	<div dojoType="dojox.layout.RotatorPager" rotatorId="myRotator">
    		<button dojoType="dijit.form.Button" dojoAttachPoint="previous">Prev</button>
    		<span dojoAttachPoint="current"></span> / <span dojoAttachPoint="total"></span>
    		<button dojoType="dijit.form.Button" dojoAttachPoint="next">Next</button>
    	</div>

  • example

    A pager with only a play/pause toggle button.
    	<div dojoType="dojox.layout.RotatorPager" rotatorId="myRotator">
    		<button dojoType="dijit.form.ToggleButton" dojoAttachPoint="playPause"></button>
    	</div>

  • example

    A pager styled with iconClass.
    	<div dojoType="dojox.layout.RotatorPager" class="rotatorIcons" rotatorId="myRotator">
    		<button dojoType="dijit.form.Button" iconClass="previous" dojoAttachPoint="previous">Prev</button>
    		<button dojoType="dijit.form.ToggleButton" iconClass="playPause" dojoAttachPoint="playPause"></button>
    		<button dojoType="dijit.form.Button" iconClass="next" dojoAttachPoint="next">Next</button>
    		<span dojoAttachPoint="current"></span> / <span dojoAttachPoint="total"></span>
    	</div>

• dojox.layout.RotatorPager.widgetsInTemplate

  • type

    Object

• dojox.layout.RotatorPager.rotatorId

  • type

    int

  • summary

    The ID of the rotator this pager is tied to.
    Only required if defined outside of the RotatorContainer's container.

• dojox.layout.RotatorPager.postMixInProperties

  • type

    Function

• dojox.layout.RotatorPager.templateString

  • type

    String

• dojox.layout.RotatorPager.postCreate

  • type

    Function

• dojox.layout.RotatorPager._subscriptions

  • type

    Array

• dojox.layout.RotatorPager.destroy

  • summary

    Unsubscribe to all of our topics

  • type

    Function

• dojox.layout.RotatorPager._state

  • parameters:
    • playing: (typeof boolean)
  • summary

    Updates the display of the play/pause button

  • type

    Function

• dojox.layout.RotatorPager._update

  • parameters:
    • playing: (typeof boolean)
    • current: (typeof int)
    • total: (typeof int)
  • summary

    Updates the pager's play/pause button, current child, and total number of children.

  • type

    Function

• dojox.layout.RotatorPager.current.innerHTML

• dojox.layout.RotatorPager.total.innerHTML

• dojox.layout

  • type

    Object

• dojox

  • type

    Object