webgui/www/extras/yui/docs/YAHOO.widget.Carousel.html
JT Smith 20f8df1291 upgrading to YUI 2.6
data tables are going to need some work yet, but the other stuff seems to be working 100%
2008-10-22 23:53:29 +00:00

6501 lines
314 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>API: carousel YAHOO.widget.Carousel (YUI Library)</title>
<link rel="stylesheet" type="text/css" href="assets/api.css">
<script type="text/javascript" src="assets/api-js"></script>
<script type="text/javascript" src="assets/ac-js"></script>
</head>
<body id="yahoo-com">
<div id="doc3" class="yui-t2">
<div id="hd">
<a href="http://developer.yahoo.com/yui/"><h1>Yahoo! UI Library</h1></a>
<h3>Carousel Widget&nbsp; <span class="subtitle">2.6.0</span></h3>
<p>
<a href="./index.html">Yahoo! UI Library</a>
&gt; <a href="./module_carousel.html">carousel</a>
&gt; YAHOO.widget.Carousel
</p>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<form name="yui-classopts-form">
<span id="classopts"><input type="checkbox" name="showprivate" id="showprivate" /> <label for="showprivate">Show Private</label></span>
<span id="classopts"><input type="checkbox" name="showprotected" id="showprotected" /> <label for="showprotected">Show Protected</label></span>
<span id="classopts"><input type="checkbox" name="showdeprecated" id="showdeprecated" /> <label for="showdeprecated">Show Deprecated</label></span>
</form>
<h2>
Class <b>YAHOO.widget.Carousel</b>
<span class="extends">
- extends <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>
</span>
<span class="extends">
</span>
</code>
</h2>
<!-- class tree goes here -->
<div class="summary description">
The Carousel widget.
</div>
<div class="section constructor details">
<h3 id="constructor">Constructor</h3>
<div class="content">
<div class="detail">
<strong>YAHOO.widget.Carousel</strong>
<code>
(
el
,
cfg
)
</code>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el
&lt;HTMLElement | String&gt;
</code>
The HTML element that represents the
the container that houses the Carousel.
</dd>
<dd>
<code>cfg
&lt;Object&gt;
</code>
(optional) The configuration values
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="section field details">
<h3 id="properties">Properties</h3>
<div class="content">
<div class="private">
<h4><a name="property__carouselEl">_carouselEl</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The Carousel element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__clipEl">_clipEl</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The Carousel clipping container element.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__firstItem">_firstItem</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The current first index of the Carousel.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__isAnimationInProgress">_isAnimationInProgress</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
Is the animation still in progress?
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__itemsTable">_itemsTable</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The table of items in the Carousel.
The numItems is the number of items in the Carousel, items being the
array of items in the Carousel. The size is the size of a single
item in the Carousel. It is cached here for efficiency (to avoid
computing the size multiple times).
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__navBtns">_navBtns</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The Carousel navigation buttons.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__navEl">_navEl</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The Carousel navigation.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__nextEnabled">_nextEnabled</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
Status of the next navigation item.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__pages">_pages</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
The Carousel pages structure.
This is an object of the total number of pages and the current page.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__prevEnabled">_prevEnabled</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
Status of the previous navigation item.
</div>
</div>
<hr />
</div>
<div class="private">
<h4><a name="property__recomputeSize">_recomputeSize</a>
<code>- private object</code>
</h4>
<div class="detail">
<div class="description">
Whether the Carousel size needs to be recomputed or not?
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_BUTTON">BUTTON</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the Carousel navigation buttons.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-button"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_CAROUSEL">CAROUSEL</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the Carousel element.
</div>
</div>
<div class="default">
Default Value: "yui-carousel"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_CAROUSEL_EL">CAROUSEL_EL</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the container of the items in the Carousel.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-element"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_CONTAINER">CONTAINER</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the Carousel's container element.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-container"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_CONTENT">CONTENT</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the Carousel's container element.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-content"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_DISABLED">DISABLED</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a disabled navigation button.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-button-disabled"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_FIRST_NAV">FIRST_NAV</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the first Carousel navigation button.
</div>
</div>
<div class="default">
Default Value: " yui-carousel-first-button"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_FIRST_NAV_DISABLED">FIRST_NAV_DISABLED</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a first disabled navigation button.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-first-button-disabled"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_FIRST_PAGE">FIRST_PAGE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a first page element.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-nav-first-page"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_FIRST_VISIBLE">FIRST_VISIBLE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The offset of the first visible item in the Carousel.
</div>
</div>
<div class="default">
Default Value: 0
</div>
<hr />
</div>
<div class="">
<h4><a name="property_FOCUSSED_BUTTON">FOCUSSED_BUTTON</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the Carousel navigation button that has focus.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-button-focus"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_HORIZONTAL">HORIZONTAL</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a horizontally oriented Carousel.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-horizontal"
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_instances">instances</a>
<code>- private static object</code>
</h4>
<div class="detail">
<div class="description">
The internal table of Carousel instances.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="property_ITEM_LOADING">ITEM_LOADING</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The element to be used as the progress indicator when the item
is still being loaded.
</div>
</div>
<div class="default">
Default Value: The progress indicator (spinner) image
</div>
<hr />
</div>
<div class="">
<h4><a name="property_ITEM_TAG_NAME">ITEM_TAG_NAME</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The tag name of the Carousel item.
</div>
</div>
<div class="default">
Default Value: "LI"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_MAX_PAGER_BUTTONS">MAX_PAGER_BUTTONS</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The maximum number of pager buttons allowed beyond which the UI
of the pager would be a drop-down of pages instead of buttons.
</div>
</div>
<div class="default">
Default Value: 5
</div>
<hr />
</div>
<div class="">
<h4><a name="property_MIN_WIDTH">MIN_WIDTH</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The minimum width of the Carousel container to support the
navigation buttons.
</div>
</div>
<div class="default">
Default Value: 99
</div>
<hr />
</div>
<div class="">
<h4><a name="property_NAV_CONTAINER">NAV_CONTAINER</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name for the navigation container for prev/next.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-buttons"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_NAVIGATION">NAVIGATION</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The navigation element container class name.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-nav"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_NEXT_BUTTON_TEXT">NEXT_BUTTON_TEXT</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The next navigation button name/text.
</div>
</div>
<div class="default">
Default Value: "Next Page"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_NEXT_PAGE">NEXT_PAGE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the next navigation link. This variable is not
only used for styling, but also for identifying the link within
the Carousel container.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-next"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_NUM_VISIBLE">NUM_VISIBLE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The number of visible items in the Carousel.
</div>
</div>
<div class="default">
Default Value: 3
</div>
<hr />
</div>
<div class="">
<h4><a name="property_PAGER_PREFIX_TEXT">PAGER_PREFIX_TEXT</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The prefix text for the pager in case the UI is a drop-down.
</div>
</div>
<div class="default">
Default Value: "Go to page "
</div>
<hr />
</div>
<div class="">
<h4><a name="property_PREV_PAGE">PREV_PAGE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the previous navigation link. This variable
is not only used for styling, but also for identifying the link
within the Carousel container.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-prev"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_PREVIOUS_BUTTON_TEXT">PREVIOUS_BUTTON_TEXT</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The previous navigation button name/text.
</div>
</div>
<div class="default">
Default Value: "Previous Page"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_SELECTED_ITEM">SELECTED_ITEM</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the selected item.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-item-selected"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_SELECTED_NAV">SELECTED_NAV</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the selected paging navigation.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-nav-page-selected"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_TAG_NAME">TAG_NAME</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The tag name of the Carousel.
</div>
</div>
<div class="default">
Default Value: "OL"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_VERTICAL">VERTICAL</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a vertically oriented Carousel.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-vertical"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_VERTICAL_CONTAINER">VERTICAL_CONTAINER</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of the (vertical) Carousel's container element.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-vertical-container"
</div>
<hr />
</div>
<div class="">
<h4><a name="property_VISIBLE">VISIBLE</a>
<code>- object</code>
</h4>
<div class="detail">
<div class="description">
The class name of a visible Carousel.
</div>
</div>
<div class="default">
Default Value: "yui-carousel-visible"
</div>
<hr />
</div>
<div class="private">
<h4><a name="property_WidgetName">WidgetName</a>
<code>- private static object</code>
</h4>
<div class="detail">
<div class="description">
The widget name.
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#property_DOM_EVENTS">DOM_EVENTS</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.AttributeProvider.html">YAHOO.util.AttributeProvider</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.AttributeProvider.html#property__configs">_configs</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Properties inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.EventProvider.html#property___yui_events">__yui_events</a><span class="private">,</span>
<a class="private" href="YAHOO.util.EventProvider.html#property___yui_subscribers">__yui_subscribers</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="methods">Methods</h3>
<div class="content">
<div class="protected">
<h4>
<a name="method__getSelectedItem">_getSelectedItem</a></h4>
<div class="detail">
<code>
protected
Number
<strong>_getSelectedItem</strong>
(
val
)
</code>
<div class="description">
Get the value for the selected item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for "selected" item
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__itemClickHandler">_itemClickHandler</a></h4>
<div class="detail">
<code>
protected
void
<strong>_itemClickHandler</strong>
(
ev
)
</code>
<div class="description">
The "click" handler for the item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The event object
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__keyboardEventHandler">_keyboardEventHandler</a></h4>
<div class="detail">
<code>
protected
void
<strong>_keyboardEventHandler</strong>
(
ev
)
</code>
<div class="description">
The keyboard event handler for Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The event that is being handled.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__pagerClickHandler">_pagerClickHandler</a></h4>
<div class="detail">
<code>
protected
void
<strong>_pagerClickHandler</strong>
(
ev
)
</code>
<div class="description">
The "click" handler for the pager navigation.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The event object
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setClipContainerSize">_setClipContainerSize</a></h4>
<div class="detail">
<code>
protected
void
<strong>_setClipContainerSize</strong>
(
clip
,
num
)
</code>
<div class="description">
Set the clip container size (based on the new numVisible value).
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>clip &lt;HTMLElement&gt;</code>
The clip container element.
</dd>
<dd>
<code>num &lt;Number&gt;</code>
optional The number of items per page.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setContainerSize">_setContainerSize</a></h4>
<div class="detail">
<code>
protected
void
<strong>_setContainerSize</strong>
(
clip
,
attr
)
</code>
<div class="description">
Set the container size.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>clip &lt;HTMLElement&gt;</code>
The clip container element.
</dd>
<dd>
<code>attr &lt;String&gt;</code>
Either set the height or width.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setFirstVisible">_setFirstVisible</a></h4>
<div class="detail">
<code>
protected
Number
<strong>_setFirstVisible</strong>
(
val
)
</code>
<div class="description">
Set the value for the Carousel's first visible item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for firstVisible
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setNavigation">_setNavigation</a></h4>
<div class="detail">
<code>
protected
Object
<strong>_setNavigation</strong>
(
cfg
)
</code>
<div class="description">
Set the value for the Carousel's navigation.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>cfg &lt;Object&gt;</code>
The navigation configuration
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Object
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setNumItems">_setNumItems</a></h4>
<div class="detail">
<code>
protected
Number
<strong>_setNumItems</strong>
(
val
)
</code>
<div class="description">
Set the number of items in the Carousel.
Warning: Setting this to a lower number than the current removes
items from the end.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for numItems
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setNumVisible">_setNumVisible</a></h4>
<div class="detail">
<code>
protected
Number
<strong>_setNumVisible</strong>
(
val
)
</code>
<div class="description">
Set the value for the number of visible items in the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for numVisible
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setOrientation">_setOrientation</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_setOrientation</strong>
(
val
)
</code>
<div class="description">
Set the orientation of the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Boolean&gt;</code>
The new value for isVertical
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setRevealAmount">_setRevealAmount</a></h4>
<div class="detail">
<code>
protected
Number
<strong>_setRevealAmount</strong>
(
val
)
</code>
<div class="description">
Set the value for the reveal amount percentage in the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for revealAmount
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Number
</code></dt>
<dd>The new value that would be set</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setSelectedItem">_setSelectedItem</a></h4>
<div class="detail">
<code>
protected
void
<strong>_setSelectedItem</strong>
(
val
)
</code>
<div class="description">
Set the value for the selected item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The new value for "selected" item
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__setupCarouselNavigation">_setupCarouselNavigation</a></h4>
<div class="detail">
<code>
protected
void
<strong>_setupCarouselNavigation</strong>
(
)
</code>
<div class="description">
Setup/Create the Carousel navigation element (if needed).
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__syncPagerUI">_syncPagerUI</a></h4>
<div class="detail">
<code>
protected
void
<strong>_syncPagerUI</strong>
(
)
</code>
<div class="description">
Synchronize and redraw the Pager UI if necessary.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__updateNavButtons">_updateNavButtons</a></h4>
<div class="detail">
<code>
protected
void
<strong>_updateNavButtons</strong>
(
el
,
setFocus
)
</code>
<div class="description">
Set the correct class for the navigation buttons.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;Object&gt;</code>
The target button
</dd>
<dd>
<code>setFocus &lt;Boolean&gt;</code>
True to set focus ring, false otherwise.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__updateTabIndex">_updateTabIndex</a></h4>
<div class="detail">
<code>
protected
void
<strong>_updateTabIndex</strong>
(
el
)
</code>
<div class="description">
Set the correct tab index for the Carousel items.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;Object&gt;</code>
The element to be focussed
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateAnimation">_validateAnimation</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateAnimation</strong>
(
cfg
)
</code>
<div class="description">
Validate animation parameters.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>cfg &lt;Object&gt;</code>
The animation configuration
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateFirstVisible">_validateFirstVisible</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateFirstVisible</strong>
(
val
)
</code>
<div class="description">
Validate the firstVisible value.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The first visible value
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateNavigation">_validateNavigation</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateNavigation</strong>
(
cfg
)
</code>
<div class="description">
Validate and navigation parameters.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>cfg &lt;Object&gt;</code>
The navigation configuration
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateNumItems">_validateNumItems</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateNumItems</strong>
(
val
)
</code>
<div class="description">
Validate the numItems value.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The numItems value
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateNumVisible">_validateNumVisible</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateNumVisible</strong>
(
val
)
</code>
<div class="description">
Validate the numVisible value.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The numVisible value
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateRevealAmount">_validateRevealAmount</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateRevealAmount</strong>
(
val
)
</code>
<div class="description">
Validate the revealAmount value.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The revealAmount value
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method__validateScrollIncrement">_validateScrollIncrement</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>_validateScrollIncrement</strong>
(
val
)
</code>
<div class="description">
Validate the scrollIncrement value.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>val &lt;Number&gt;</code>
The scrollIncrement value
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>The status of the validation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_addItem">addItem</a></h4>
<div class="detail">
<code>
Boolean
<strong>addItem</strong>
(
item
,
index
)
</code>
<div class="description">
Insert or append an item to the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>item &lt;String | Object | HTMLElement&gt;</code>
The item to be appended
to the Carousel. If the parameter is a string, it is assumed to be
the content of the newly created item. If the parameter is an
object, it is assumed to supply the content and an optional class
and an optional id of the newly created item.
</dd>
<dd>
<code>index &lt;Number&gt;</code>
optional The position to where in the list
(starts from zero).
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Return true on success, false otherwise</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_addItems">addItems</a></h4>
<div class="detail">
<code>
Boolean
<strong>addItems</strong>
(
items
)
</code>
<div class="description">
Insert or append multiple items to the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>items &lt;Array} An array of items to be added with each item
representing an item, index pair [{item, index&gt;</code>
, ...]
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Return true on success, false otherwise</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_autoScroll">autoScroll</a></h4>
<div class="detail">
<code>
private
void
<strong>autoScroll</strong>
(
)
</code>
<div class="description">
Automatically scroll the contents of the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_blur">blur</a></h4>
<div class="detail">
<code>
void
<strong>blur</strong>
(
)
</code>
<div class="description">
Remove focus from the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_clearItems
public">clearItems
public</a></h4>
<div class="detail">
<code>
void
<strong>clearItems
public</strong>
(
)
</code>
<div class="description">
Clears the items from Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_createCarousel">createCarousel</a></h4>
<div class="detail">
<code>
protected
void
<strong>createCarousel</strong>
(
elId
)
</code>
<div class="description">
Create the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>elId &lt;String&gt;</code>
The id of the element to be created
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_createCarouselClip">createCarouselClip</a></h4>
<div class="detail">
<code>
protected
void
<strong>createCarouselClip</strong>
(
)
</code>
<div class="description">
Create the Carousel clip container.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_createCarouselItem">createCarouselItem</a></h4>
<div class="detail">
<code>
protected
void
<strong>createCarouselItem</strong>
(
obj
)
</code>
<div class="description">
Create the Carousel item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>obj &lt;Object&gt;</code>
The attributes of the element to be created
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_createElement">createElement</a></h4>
<div class="detail">
<code>
private
void
<strong>createElement</strong>
(
el
,
attrs
)
</code>
<div class="description">
Create an element, set its class name and optionally install the element
to its parent.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;String&gt;</code>
The element to be created
</dd>
<dd>
<code>attrs &lt;Object&gt;</code>
Configuration of parent, class and id attributes.
If the content is specified, it is inserted after creation of the
element. The content can also be an HTML element in which case it would
be appended as a child node of the created element.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_focus">focus</a></h4>
<div class="detail">
<code>
void
<strong>focus</strong>
(
)
</code>
<div class="description">
Set focus on the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getById">getById</a></h4>
<div class="detail">
<code>
static
void
<strong>getById</strong>
(
)
</code>
<div class="description">
Return the appropriate Carousel object based on the id associated with
the Carousel element or false if none match.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_getCarouselItemSize">getCarouselItemSize</a></h4>
<div class="detail">
<code>
private
void
<strong>getCarouselItemSize</strong>
(
which
)
</code>
<div class="description">
Compute and return the height or width of a single Carousel item
depending upon the orientation.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>which &lt;String&gt;</code>
"height" or "width" to be returned. If this is
passed explicitly, the calculated size is not cached.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getElementForItem">getElementForItem</a></h4>
<div class="detail">
<code>
Element
<strong>getElementForItem</strong>
(
index
)
</code>
<div class="description">
Return the ITEM_TAG_NAME at index or null if the index is not found.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>index &lt;Number&gt;</code>
The index of the item to be returned
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Element
</code></dt>
<dd>Return the item at index or null if not found</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getElementForItems">getElementForItems</a></h4>
<div class="detail">
<code>
Array
<strong>getElementForItems</strong>
(
)
</code>
<div class="description">
Return the ITEM_TAG_NAME for all items in the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>Return all the items</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getItem">getItem</a></h4>
<div class="detail">
<code>
Object
<strong>getItem</strong>
(
index
)
</code>
<div class="description">
Return the item at index or null if the index is not found.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>index &lt;Number&gt;</code>
The index of the item to be returned
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Object
</code></dt>
<dd>Return the item at index or null if not found</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getItemPositionById">getItemPositionById</a></h4>
<div class="detail">
<code>
void
<strong>getItemPositionById</strong>
(
index
)
</code>
<div class="description">
Return the position of the Carousel item that has the id "id", or -1
if the id is not found.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>index &lt;Number&gt;</code>
The index of the item to be returned
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_getItems">getItems</a></h4>
<div class="detail">
<code>
Array
<strong>getItems</strong>
(
)
</code>
<div class="description">
Return all items as an array.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
Array
</code></dt>
<dd>Return all items in the Carousel</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_getScrollOffset">getScrollOffset</a></h4>
<div class="detail">
<code>
private
void
<strong>getScrollOffset</strong>
(
delta
)
</code>
<div class="description">
Return the scrolling offset size given the number of elements to
scroll.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>delta &lt;Number&gt;</code>
The delta number of elements to scroll by.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_getStyle">getStyle</a></h4>
<div class="detail">
<code>
private
void
<strong>getStyle</strong>
(
el
,
style
,
type
)
</code>
<div class="description">
Get the computed style of an element.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;HTMLElement&gt;</code>
The element for which the style needs to be
returned.
</dd>
<dd>
<code>style &lt;String&gt;</code>
The style attribute
</dd>
<dd>
<code>type &lt;String&gt;</code>
"int", "float", etc. (defaults to int)
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_hide">hide</a></h4>
<div class="detail">
<code>
void
<strong>hide</strong>
(
)
</code>
<div class="description">
Hide the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_init">init</a></h4>
<div class="detail">
<code>
void
<strong>init</strong>
(
el
,
attrs
)
</code>
<div class="description">
Initialize the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>el &lt;HTMLElement | String&gt;</code>
The html element that represents
the Carousel container.
</dd>
<dd>
<code>attrs &lt;Object&gt;</code>
The set of configuration attributes for
creating the Carousel.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_initAttributes">initAttributes</a></h4>
<div class="detail">
<code>
void
<strong>initAttributes</strong>
(
attrs
)
</code>
<div class="description">
Initialize the configuration attributes used to create the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>attrs &lt;Object&gt;</code>
The set of configuration attributes for
creating the Carousel.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_initEvents">initEvents</a></h4>
<div class="detail">
<code>
void
<strong>initEvents</strong>
(
)
</code>
<div class="description">
Initialize and bind the event handlers.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_loadItems">loadItems</a></h4>
<div class="detail">
<code>
private
void
<strong>loadItems</strong>
(
)
</code>
<div class="description">
The load the required set of items that are needed for display.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_parseCarousel">parseCarousel</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>parseCarousel</strong>
(
parent
)
</code>
<div class="description">
Find the Carousel within a container. The Carousel is identified by
the first element that matches the carousel element tag or the
element that has the Carousel class.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>parent &lt;HTMLElement&gt;</code>
The parent element to look under
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>True if Carousel is found, false otherwise</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_parseCarouselItems">parseCarouselItems</a></h4>
<div class="detail">
<code>
protected
void
<strong>parseCarouselItems</strong>
(
)
</code>
<div class="description">
Find the items within the Carousel and add them to the items table.
A Carousel item is identified by elements that matches the carousel
item element tag.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="protected">
<h4>
<a name="method_parseCarouselNavigation">parseCarouselNavigation</a></h4>
<div class="detail">
<code>
protected
Boolean
<strong>parseCarouselNavigation</strong>
(
parent
)
</code>
<div class="description">
Find the Carousel navigation within a container. The navigation
elements need to match the carousel navigation class names.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>parent &lt;HTMLElement&gt;</code>
The parent element to look under
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>True if at least one is found, false otherwise</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_removeItem">removeItem</a></h4>
<div class="detail">
<code>
Boolean
<strong>removeItem</strong>
(
index
)
</code>
<div class="description">
Remove an item at index from the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>index &lt;Number&gt;</code>
The position to where in the list (starts from
zero).
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Return true on success, false otherwise</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_render">render</a></h4>
<div class="detail">
<code>
Boolean
<strong>render</strong>
(
appendTo
)
</code>
<div class="description">
Render the Carousel.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>appendTo &lt;HTMLElement | String&gt;</code>
The element to which the
Carousel should be appended prior to rendering.
</dd>
</dl>
<dl>
<dt>Returns:
<code>
Boolean
</code></dt>
<dd>Status of the operation</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_scrollBackward">scrollBackward</a></h4>
<div class="detail">
<code>
void
<strong>scrollBackward</strong>
(
)
</code>
<div class="description">
Scroll the Carousel by an item backward.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_scrollForward">scrollForward</a></h4>
<div class="detail">
<code>
void
<strong>scrollForward</strong>
(
)
</code>
<div class="description">
Scroll the Carousel by an item forward.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_scrollPageBackward">scrollPageBackward</a></h4>
<div class="detail">
<code>
private
void
<strong>scrollPageBackward</strong>
(
ev
,
obj
)
</code>
<div class="description">
Scroll the Carousel by a page backward.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The event object
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The context object
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_scrollPageForward">scrollPageForward</a></h4>
<div class="detail">
<code>
private
void
<strong>scrollPageForward</strong>
(
ev
,
obj
)
</code>
<div class="description">
Scroll the Carousel by a page forward.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>ev &lt;Event&gt;</code>
The event object
</dd>
<dd>
<code>obj &lt;Object&gt;</code>
The context object
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_scrollTo">scrollTo</a></h4>
<div class="detail">
<code>
void
<strong>scrollTo</strong>
(
item
,
dontSelect
)
</code>
<div class="description">
Scroll the Carousel to make the item the first visible item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>item &lt;object&gt;</code>
Number The index of the element to position at.
</dd>
<dd>
<code>dontSelect &lt;object&gt;</code>
Boolean True if select should be avoided
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_setItemSelection">setItemSelection</a></h4>
<div class="detail">
<code>
private
void
<strong>setItemSelection</strong>
(
newposition
,
oldposition
)
</code>
<div class="description">
Set the selected item.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>newposition &lt;Number&gt;</code>
The index of the new position
</dd>
<dd>
<code>oldposition &lt;Number&gt;</code>
The index of the previous position
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_show">show</a></h4>
<div class="detail">
<code>
void
<strong>show</strong>
(
)
</code>
<div class="description">
Display the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_startAutoPlay">startAutoPlay</a></h4>
<div class="detail">
<code>
void
<strong>startAutoPlay</strong>
(
)
</code>
<div class="description">
Start auto-playing the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_stopAutoPlay">stopAutoPlay</a></h4>
<div class="detail">
<code>
void
<strong>stopAutoPlay</strong>
(
)
</code>
<div class="description">
Stop auto-playing the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_syncNavigation">syncNavigation</a></h4>
<div class="detail">
<code>
private
void
<strong>syncNavigation</strong>
(
)
</code>
<div class="description">
Fire custom events for enabling/disabling navigation elements.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="private">
<h4>
<a name="method_syncUI">syncUI</a></h4>
<div class="detail">
<code>
private
void
<strong>syncUI</strong>
(
o
)
</code>
<div class="description">
Fire custom events for synchronizing the DOM.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>o &lt;Object&gt;</code>
The item that needs to be added or removed
</dd>
</dl>
<dl>
<dt>Returns:
<code>
void
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="method_toString">toString</a></h4>
<div class="detail">
<code>
String
<strong>toString</strong>
(
)
</code>
<div class="description">
Return the string representation of the Carousel.
</div>
<div class="description">
<dl>
<dt>Returns:
<code>
String
</code></dt>
<dd></dd>
</dl>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="private" href="YAHOO.util.Element.html#method__registerHTMLAttr">_registerHTMLAttr</a><span class="private">,</span> <a class="" href="YAHOO.util.Element.html#method_addClass">addClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_addListener">addListener</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_appendChild">appendChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_appendTo">appendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_fireQueue">fireQueue</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_getElementsByClassName">getElementsByClassName</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_getElementsByTagName">getElementsByTagName</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_getStyle">getStyle</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_hasChildNodes">hasChildNodes</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_hasClass">hasClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_initAttributes">initAttributes</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_insertBefore">insertBefore</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_on">on</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_removeChild">removeChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_removeClass">removeClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_removeListener">removeListener</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_replaceChild">replaceChild</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_replaceClass">replaceClass</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_setStyle">setStyle</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#method_subscribe">subscribe</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.AttributeProvider.html">YAHOO.util.AttributeProvider</a>:</h4>
<div class="content">
<code>
<a class=" deprecated" href="YAHOO.util.AttributeProvider.html#method_configureAttribute">configureAttribute</a><span class=" deprecated">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_fireBeforeChangeEvent">fireBeforeChangeEvent</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_fireChangeEvent">fireChangeEvent</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_get">get</a><span class="">,</span> <a class="private" href="YAHOO.util.AttributeProvider.html#method_getAttributeConfig">getAttributeConfig</a><span class="private">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_getAttributeKeys">getAttributeKeys</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_refresh">refresh</a><span class="">,</span> <a class=" deprecated" href="YAHOO.util.AttributeProvider.html#method_register">register</a><span class=" deprecated">,</span> <a class="private" href="YAHOO.util.AttributeProvider.html#method_resetAttributeConfig">resetAttributeConfig</a><span class="private">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_resetValue">resetValue</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_set">set</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_setAttributeConfig">setAttributeConfig</a><span class="">,</span> <a class="" href="YAHOO.util.AttributeProvider.html#method_setAttributes">setAttributes</a>
</code>
</div>
</div>
<div class="section field inheritance">
<h4>Methods inherited from <a href="YAHOO.util.EventProvider.html">YAHOO.util.EventProvider</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.EventProvider.html#method_createEvent">createEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#method_fireEvent">fireEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#method_hasEvent">hasEvent</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#method_subscribe">subscribe</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#method_unsubscribe">unsubscribe</a><span class="">,</span> <a class="" href="YAHOO.util.EventProvider.html#method_unsubscribeAll">unsubscribeAll</a>
</code>
</div>
</div>
<div class="section method details">
<h3 id="events">Events</h3>
<div class="content">
<div class="">
<h4>
<a name="event_afterScroll">afterScroll</a></h4>
<div class="detail">
<code>
<strong>afterScroll</strong>
(
)
</code>
<div class="description">
Fires when the Carousel has scrolled to the previous or
next page. Passes back the index of the first and last visible items in
the Carousel. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_animationChange">animationChange</a></h4>
<div class="detail">
<code>
<strong>animationChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'animation' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_autoPlayChange">autoPlayChange</a></h4>
<div class="detail">
<code>
<strong>autoPlayChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'autoPlay' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeAnimationChange">beforeAnimationChange</a></h4>
<div class="detail">
<code>
<strong>beforeAnimationChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'animation' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeAutoPlayChange">beforeAutoPlayChange</a></h4>
<div class="detail">
<code>
<strong>beforeAutoPlayChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'autoPlay' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeCurrentPageChange">beforeCurrentPageChange</a></h4>
<div class="detail">
<code>
<strong>beforeCurrentPageChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'currentPage' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeFirstVisibleChange">beforeFirstVisibleChange</a></h4>
<div class="detail">
<code>
<strong>beforeFirstVisibleChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'firstVisible' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeHide">beforeHide</a></h4>
<div class="detail">
<code>
<strong>beforeHide</strong>
(
)
</code>
<div class="description">
Fires before the Carousel is hidden. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeIsCircularChange">beforeIsCircularChange</a></h4>
<div class="detail">
<code>
<strong>beforeIsCircularChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'isCircular' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeIsVerticalChange">beforeIsVerticalChange</a></h4>
<div class="detail">
<code>
<strong>beforeIsVerticalChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'isVertical' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeNavigationChange">beforeNavigationChange</a></h4>
<div class="detail">
<code>
<strong>beforeNavigationChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'navigation' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeNumItemsChange">beforeNumItemsChange</a></h4>
<div class="detail">
<code>
<strong>beforeNumItemsChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'numItems' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeNumVisibleChange">beforeNumVisibleChange</a></h4>
<div class="detail">
<code>
<strong>beforeNumVisibleChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'numVisible' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforePageChange">beforePageChange</a></h4>
<div class="detail">
<code>
<strong>beforePageChange</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is about to scroll to the previous
or next page. Passes back the page number of the current page. Note
that the first page number is zero. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeRevealAmountChange">beforeRevealAmountChange</a></h4>
<div class="detail">
<code>
<strong>beforeRevealAmountChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'revealAmount' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeScroll">beforeScroll</a></h4>
<div class="detail">
<code>
<strong>beforeScroll</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is about to scroll to the previous
or next page. Passes back the index of the first and last visible items
in the Carousel and the direction (backward/forward) of the scroll. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeScrollIncrementChange">beforeScrollIncrementChange</a></h4>
<div class="detail">
<code>
<strong>beforeScrollIncrementChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'scrollIncrement' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeSelectedItemChange">beforeSelectedItemChange</a></h4>
<div class="detail">
<code>
<strong>beforeSelectedItemChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'selectedItem' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeSelectOnScrollChange">beforeSelectOnScrollChange</a></h4>
<div class="detail">
<code>
<strong>beforeSelectOnScrollChange</strong>
(
event
)
</code>
<div class="description">
Fires before the value for the configuration attribute 'selectOnScroll' changes. Return false to cancel the attribute change.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_beforeShow">beforeShow</a></h4>
<div class="detail">
<code>
<strong>beforeShow</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is about to be shown. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_blur">blur</a></h4>
<div class="detail">
<code>
<strong>blur</strong>
(
)
</code>
<div class="description">
Fires when the Carousel loses focus. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_currentPageChange">currentPageChange</a></h4>
<div class="detail">
<code>
<strong>currentPageChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'currentPage' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_firstVisibleChange">firstVisibleChange</a></h4>
<div class="detail">
<code>
<strong>firstVisibleChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'firstVisible' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_focus">focus</a></h4>
<div class="detail">
<code>
<strong>focus</strong>
(
)
</code>
<div class="description">
Fires when the Carousel gains focus. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_hide">hide</a></h4>
<div class="detail">
<code>
<strong>hide</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is hidden. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_isCircularChange">isCircularChange</a></h4>
<div class="detail">
<code>
<strong>isCircularChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'isCircular' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_isVerticalChange">isVerticalChange</a></h4>
<div class="detail">
<code>
<strong>isVerticalChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'isVertical' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemAdded">itemAdded</a></h4>
<div class="detail">
<code>
<strong>itemAdded</strong>
(
)
</code>
<div class="description">
Fires when an item has been added to the Carousel. Passes
back the content of the item that would be added, the index at which the
item would be added, and the event itself. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemRemoved">itemRemoved</a></h4>
<div class="detail">
<code>
<strong>itemRemoved</strong>
(
)
</code>
<div class="description">
Fires when an item has been removed from the Carousel.
Passes back the content of the item that would be removed, the index
from which the item would be removed, and the event itself. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_itemSelected">itemSelected</a></h4>
<div class="detail">
<code>
<strong>itemSelected</strong>
(
)
</code>
<div class="description">
Fires when an item has been selected in the Carousel.
Passes back the index of the selected item in the Carousel. Note, that
the index begins from zero. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_loadItems">loadItems</a></h4>
<div class="detail">
<code>
<strong>loadItems</strong>
(
)
</code>
<div class="description">
Fires when the Carousel needs more items to be loaded for
displaying them. Passes back the first and last visible items in the
Carousel, and the number of items needed to be loaded. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_navigationChange">navigationChange</a></h4>
<div class="detail">
<code>
<strong>navigationChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'navigation' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_navigationStateChange">navigationStateChange</a></h4>
<div class="detail">
<code>
<strong>navigationStateChange</strong>
(
)
</code>
<div class="description">
Fires when the state of either one of the navigation
buttons are changed from enabled to disabled or vice versa. Passes back
the state (true/false) of the previous and next buttons. The value true
signifies the button is enabled, false signifies disabled. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_numItemsChange">numItemsChange</a></h4>
<div class="detail">
<code>
<strong>numItemsChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'numItems' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_numVisibleChange">numVisibleChange</a></h4>
<div class="detail">
<code>
<strong>numVisibleChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'numVisible' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_pageChange">pageChange</a></h4>
<div class="detail">
<code>
<strong>pageChange</strong>
(
)
</code>
<div class="description">
Fires after the Carousel has scrolled to the previous or
next page. Passes back the page number of the current page. Note
that the first page number is zero. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_render">render</a></h4>
<div class="detail">
<code>
<strong>render</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is rendered. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_revealAmountChange">revealAmountChange</a></h4>
<div class="detail">
<code>
<strong>revealAmountChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'revealAmount' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_scrollIncrementChange">scrollIncrementChange</a></h4>
<div class="detail">
<code>
<strong>scrollIncrementChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'scrollIncrement' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_selectedItemChange">selectedItemChange</a></h4>
<div class="detail">
<code>
<strong>selectedItemChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'selectedItem' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_selectOnScrollChange">selectOnScrollChange</a></h4>
<div class="detail">
<code>
<strong>selectOnScrollChange</strong>
(
event
)
</code>
<div class="description">
Fires when the value for the configuration attribute 'selectOnScroll' changes.
</div>
<div class="description">
<dl>
<dt>Parameters:</dt>
<dd>
<code>event &lt;{oldValue: any, newValue: any}&gt;</code>
An object containing the previous attribute value and the new value.
</dd>
</dl>
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_show">show</a></h4>
<div class="detail">
<code>
<strong>show</strong>
(
)
</code>
<div class="description">
Fires when the Carousel is shown. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_startAutoPlay">startAutoPlay</a></h4>
<div class="detail">
<code>
<strong>startAutoPlay</strong>
(
)
</code>
<div class="description">
Fires when the auto play has started in the Carousel. See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
<div class="">
<h4>
<a name="event_stopAutoPlay">stopAutoPlay</a></h4>
<div class="detail">
<code>
<strong>stopAutoPlay</strong>
(
)
</code>
<div class="description">
Fires when the auto play has been stopped in the Carousel.
See
<a href="YAHOO.util.Element.html#addListener">Element.addListener</a>
for more information on listening for this event.
</div>
<div class="description">
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Events inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#event_appendTo">appendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#event_available">available</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#event_beforeAppendTo">beforeAppendTo</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#event_beforeElementChange">beforeElementChange</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#event_contentReady">contentReady</a><span class="">,</span> <a class="" href="YAHOO.util.Element.html#event_elementChange">elementChange</a><span class="">,</span>
</code>
</div>
</div>
<div class="section field details">
<h3 id="configattributes">Configuration Attributes</h3>
<div class="content">
<div class="">
<h4><a name="config_animation">animation</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
The optional animation attributes for the Carousel.
</div>
</div>
<div class="default">
Default Value: <br>
{ speed: 0, // the animation speed (in seconds)<br>
effect: null } // the animation effect (like
YAHOO.util.Easing.easeOut)
</div>
<hr />
</div>
<div class="">
<h4><a name="config_autoPlay">autoPlay</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
Set this to time in milli-seconds to have the
Carousel automatically scroll the contents.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_currentPage">currentPage</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The current page number (read-only.)
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_firstVisible">firstVisible</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The index to start the Carousel from (indexes begin
from zero)
</div>
</div>
<div class="default">
Default Value: 0
</div>
<hr />
</div>
<div class="">
<h4><a name="config_isCircular">isCircular</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Set this to true to wrap scrolling of the contents
in the Carousel.
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="config_isVertical">isVertical</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
True if the orientation of the Carousel is vertical
</div>
</div>
<div class="default">
Default Value: false
</div>
<hr />
</div>
<div class="">
<h4><a name="config_navigation">navigation</a>
<code>- Object</code>
</h4>
<div class="detail">
<div class="description">
The set of navigation controls for Carousel
</div>
</div>
<div class="default">
Default Value: <br>
{ prev: null, // the previous navigation element<br>
next: null } // the next navigation element
</div>
<hr />
</div>
<div class="">
<h4><a name="config_numItems">numItems</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The number of items in the Carousel.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_numVisible">numVisible</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The number of visible items in the Carousel's
viewport.
</div>
</div>
<div class="default">
Default Value: 3
</div>
<hr />
</div>
<div class="">
<h4><a name="config_revealAmount">revealAmount</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The percentage of the item to be revealed on each
side of the Carousel (before and after the first and last item
in the Carousel's viewport.)
</div>
</div>
<div class="default">
Default Value: 0
</div>
<hr />
</div>
<div class="">
<h4><a name="config_scrollIncrement">scrollIncrement</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The number of items to scroll by for arrow keys.
</div>
</div>
<div class="default">
Default Value: 1
</div>
<hr />
</div>
<div class="">
<h4><a name="config_selectedItem">selectedItem</a>
<code>- Number</code>
</h4>
<div class="detail">
<div class="description">
The index of the selected item.
</div>
</div>
<hr />
</div>
<div class="">
<h4><a name="config_selectOnScroll">selectOnScroll</a>
<code>- Boolean</code>
</h4>
<div class="detail">
<div class="description">
Set this to true to automatically set focus to
follow scrolling in the Carousel.
</div>
</div>
<div class="default">
Default Value: true
</div>
<hr />
</div>
</div>
</div>
<div class="section field inheritance">
<h4>Configuration attributes inherited from <a href="YAHOO.util.Element.html">YAHOO.util.Element</a>:</h4>
<div class="content">
<code>
<a class="" href="YAHOO.util.Element.html#config_element">element</a><span class="">,</span>
</code>
</div>
</div>
</div>
</div>
<div class="yui-b">
<div class="nav">
<div class="module">
<h4>Modules</h4>
<ul class="content">
<li class=""><a href="module_animation.html">animation</a></li>
<li class=""><a href="module_autocomplete.html">autocomplete</a></li>
<li class=""><a href="module_button.html">button</a></li>
<li class=""><a href="module_calendar.html">calendar</a></li>
<li class="selected"><a href="module_carousel.html">carousel</a></li>
<li class=""><a href="module_charts.html">charts</a></li>
<li class=""><a href="module_colorpicker.html">colorpicker</a></li>
<li class=""><a href="module_connection.html">connection</a></li>
<li class=""><a href="module_container.html">container</a></li>
<li class=""><a href="module_cookie.html">cookie</a></li>
<li class=""><a href="module_datasource.html">datasource</a></li>
<li class=""><a href="module_datatable.html">datatable</a></li>
<li class=""><a href="module_dom.html">dom</a></li>
<li class=""><a href="module_dragdrop.html">dragdrop</a></li>
<li class=""><a href="module_editor.html">editor</a></li>
<li class=""><a href="module_element.html">element</a></li>
<li class=""><a href="module_event.html">event</a></li>
<li class=""><a href="module_get.html">get</a></li>
<li class=""><a href="module_history.html">history</a></li>
<li class=""><a href="module_imagecropper.html">imagecropper</a></li>
<li class=""><a href="module_imageloader.html">imageloader</a></li>
<li class=""><a href="module_json.html">json</a></li>
<li class=""><a href="module_layout.html">layout</a></li>
<li class=""><a href="module_logger.html">logger</a></li>
<li class=""><a href="module_menu.html">menu</a></li>
<li class=""><a href="module_paginator.html">paginator</a></li>
<li class=""><a href="module_profiler.html">profiler</a></li>
<li class=""><a href="module_profilerviewer.html">profilerviewer</a></li>
<li class=""><a href="module_resize.html">resize</a></li>
<li class=""><a href="module_selector.html">selector</a></li>
<li class=""><a href="module_slider.html">slider</a></li>
<li class=""><a href="module_tabview.html">tabview</a></li>
<li class=""><a href="module_treeview.html">treeview</a></li>
<li class=""><a href="module_uploader.html">uploader</a></li>
<li class=""><a href="module_yahoo.html">yahoo</a></li>
<li class=""><a href="module_yuiloader.html">yuiloader</a></li>
<li class=""><a href="module_yuitest.html">yuitest</a></li>
</ul>
</div>
<div class="module">
<h4>Classes</h4>
<ul class="content">
<li class="selected"><a href="YAHOO.widget.Carousel.html">YAHOO.widget.Carousel</a></li>
</ul>
</div>
<div class="module">
<h4>Files</h4>
<ul class="content">
<li class=""><a href="Carousel.js.html">Carousel.js</a></li>
</ul>
</div>
<div class="module">
<h4>Properties</h4>
<ul class="content">
<li class="private"><a href="#property__carouselEl">_carouselEl</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__clipEl">_clipEl</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__firstItem">_firstItem</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__isAnimationInProgress">_isAnimationInProgress</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__itemsTable">_itemsTable</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__navBtns">_navBtns</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__navEl">_navEl</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__nextEnabled">_nextEnabled</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__pages">_pages</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__prevEnabled">_prevEnabled</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property__recomputeSize">_recomputeSize</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_BUTTON">BUTTON</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_CAROUSEL">CAROUSEL</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_CAROUSEL_EL">CAROUSEL_EL</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_CONTAINER">CONTAINER</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_CONTENT">CONTENT</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_DISABLED">DISABLED</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_FIRST_NAV">FIRST_NAV</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_FIRST_NAV_DISABLED">FIRST_NAV_DISABLED</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_FIRST_PAGE">FIRST_PAGE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_FIRST_VISIBLE">FIRST_VISIBLE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_FOCUSSED_BUTTON">FOCUSSED_BUTTON</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_HORIZONTAL">HORIZONTAL</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property_instances">instances</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_ITEM_LOADING">ITEM_LOADING</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_ITEM_TAG_NAME">ITEM_TAG_NAME</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_MAX_PAGER_BUTTONS">MAX_PAGER_BUTTONS</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_MIN_WIDTH">MIN_WIDTH</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_NAV_CONTAINER">NAV_CONTAINER</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_NAVIGATION">NAVIGATION</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_NEXT_BUTTON_TEXT">NEXT_BUTTON_TEXT</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_NEXT_PAGE">NEXT_PAGE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_NUM_VISIBLE">NUM_VISIBLE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_PAGER_PREFIX_TEXT">PAGER_PREFIX_TEXT</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_PREV_PAGE">PREV_PAGE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_PREVIOUS_BUTTON_TEXT">PREVIOUS_BUTTON_TEXT</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_SELECTED_ITEM">SELECTED_ITEM</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_SELECTED_NAV">SELECTED_NAV</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_TAG_NAME">TAG_NAME</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_VERTICAL">VERTICAL</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_VERTICAL_CONTAINER">VERTICAL_CONTAINER</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class=""><a href="#property_VISIBLE">VISIBLE</a>
<!--<code>&lt;object&gt;</code>-->
</li>
<li class="private"><a href="#property_WidgetName">WidgetName</a>
<!--<code>&lt;object&gt;</code>-->
</li>
</ul>
</div>
<div class="module">
<h4>Methods</h4>
<ul class="content">
<li class="protected"><!--<code>Number</code>-->
<a href="#method__getSelectedItem">_getSelectedItem</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__itemClickHandler">_itemClickHandler</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__keyboardEventHandler">_keyboardEventHandler</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__pagerClickHandler">_pagerClickHandler</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__setClipContainerSize">_setClipContainerSize</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__setContainerSize">_setContainerSize</a>
</li>
<li class="protected"><!--<code>Number</code>-->
<a href="#method__setFirstVisible">_setFirstVisible</a>
</li>
<li class="protected"><!--<code>Object</code>-->
<a href="#method__setNavigation">_setNavigation</a>
</li>
<li class="protected"><!--<code>Number</code>-->
<a href="#method__setNumItems">_setNumItems</a>
</li>
<li class="protected"><!--<code>Number</code>-->
<a href="#method__setNumVisible">_setNumVisible</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__setOrientation">_setOrientation</a>
</li>
<li class="protected"><!--<code>Number</code>-->
<a href="#method__setRevealAmount">_setRevealAmount</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__setSelectedItem">_setSelectedItem</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__setupCarouselNavigation">_setupCarouselNavigation</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__syncPagerUI">_syncPagerUI</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__updateNavButtons">_updateNavButtons</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method__updateTabIndex">_updateTabIndex</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateAnimation">_validateAnimation</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateFirstVisible">_validateFirstVisible</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateNavigation">_validateNavigation</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateNumItems">_validateNumItems</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateNumVisible">_validateNumVisible</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateRevealAmount">_validateRevealAmount</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method__validateScrollIncrement">_validateScrollIncrement</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_addItem">addItem</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_addItems">addItems</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_autoScroll">autoScroll</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_blur">blur</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_clearItems
public">clearItems
public</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method_createCarousel">createCarousel</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method_createCarouselClip">createCarouselClip</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method_createCarouselItem">createCarouselItem</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_createElement">createElement</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_focus">focus</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_getById">getById</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_getCarouselItemSize">getCarouselItemSize</a>
</li>
<li class=""><!--<code>Element</code>-->
<a href="#method_getElementForItem">getElementForItem</a>
</li>
<li class=""><!--<code>Array</code>-->
<a href="#method_getElementForItems">getElementForItems</a>
</li>
<li class=""><!--<code>Object</code>-->
<a href="#method_getItem">getItem</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_getItemPositionById">getItemPositionById</a>
</li>
<li class=""><!--<code>Array</code>-->
<a href="#method_getItems">getItems</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_getScrollOffset">getScrollOffset</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_getStyle">getStyle</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_hide">hide</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_init">init</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_initAttributes">initAttributes</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_initEvents">initEvents</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_loadItems">loadItems</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method_parseCarousel">parseCarousel</a>
</li>
<li class="protected"><!--<code>void</code>-->
<a href="#method_parseCarouselItems">parseCarouselItems</a>
</li>
<li class="protected"><!--<code>Boolean</code>-->
<a href="#method_parseCarouselNavigation">parseCarouselNavigation</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_removeItem">removeItem</a>
</li>
<li class=""><!--<code>Boolean</code>-->
<a href="#method_render">render</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_scrollBackward">scrollBackward</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_scrollForward">scrollForward</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_scrollPageBackward">scrollPageBackward</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_scrollPageForward">scrollPageForward</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_scrollTo">scrollTo</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_setItemSelection">setItemSelection</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_show">show</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_startAutoPlay">startAutoPlay</a>
</li>
<li class=""><!--<code>void</code>-->
<a href="#method_stopAutoPlay">stopAutoPlay</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_syncNavigation">syncNavigation</a>
</li>
<li class="private"><!--<code>void</code>-->
<a href="#method_syncUI">syncUI</a>
</li>
<li class=""><!--<code>String</code>-->
<a href="#method_toString">toString</a>
</li>
</ul>
</div>
<div class="module">
<h4>Events</h4>
<ul class="content">
<li class="">
<a href="#event_afterScroll">afterScroll</a>
</li>
<li class="">
<a href="#event_animationChange">animationChange</a>
</li>
<li class="">
<a href="#event_autoPlayChange">autoPlayChange</a>
</li>
<li class="">
<a href="#event_beforeAnimationChange">beforeAnimationChange</a>
</li>
<li class="">
<a href="#event_beforeAutoPlayChange">beforeAutoPlayChange</a>
</li>
<li class="">
<a href="#event_beforeCurrentPageChange">beforeCurrentPageChange</a>
</li>
<li class="">
<a href="#event_beforeFirstVisibleChange">beforeFirstVisibleChange</a>
</li>
<li class="">
<a href="#event_beforeHide">beforeHide</a>
</li>
<li class="">
<a href="#event_beforeIsCircularChange">beforeIsCircularChange</a>
</li>
<li class="">
<a href="#event_beforeIsVerticalChange">beforeIsVerticalChange</a>
</li>
<li class="">
<a href="#event_beforeNavigationChange">beforeNavigationChange</a>
</li>
<li class="">
<a href="#event_beforeNumItemsChange">beforeNumItemsChange</a>
</li>
<li class="">
<a href="#event_beforeNumVisibleChange">beforeNumVisibleChange</a>
</li>
<li class="">
<a href="#event_beforePageChange">beforePageChange</a>
</li>
<li class="">
<a href="#event_beforeRevealAmountChange">beforeRevealAmountChange</a>
</li>
<li class="">
<a href="#event_beforeScroll">beforeScroll</a>
</li>
<li class="">
<a href="#event_beforeScrollIncrementChange">beforeScrollIncrementChange</a>
</li>
<li class="">
<a href="#event_beforeSelectedItemChange">beforeSelectedItemChange</a>
</li>
<li class="">
<a href="#event_beforeSelectOnScrollChange">beforeSelectOnScrollChange</a>
</li>
<li class="">
<a href="#event_beforeShow">beforeShow</a>
</li>
<li class="">
<a href="#event_blur">blur</a>
</li>
<li class="">
<a href="#event_currentPageChange">currentPageChange</a>
</li>
<li class="">
<a href="#event_firstVisibleChange">firstVisibleChange</a>
</li>
<li class="">
<a href="#event_focus">focus</a>
</li>
<li class="">
<a href="#event_hide">hide</a>
</li>
<li class="">
<a href="#event_isCircularChange">isCircularChange</a>
</li>
<li class="">
<a href="#event_isVerticalChange">isVerticalChange</a>
</li>
<li class="">
<a href="#event_itemAdded">itemAdded</a>
</li>
<li class="">
<a href="#event_itemRemoved">itemRemoved</a>
</li>
<li class="">
<a href="#event_itemSelected">itemSelected</a>
</li>
<li class="">
<a href="#event_loadItems">loadItems</a>
</li>
<li class="">
<a href="#event_navigationChange">navigationChange</a>
</li>
<li class="">
<a href="#event_navigationStateChange">navigationStateChange</a>
</li>
<li class="">
<a href="#event_numItemsChange">numItemsChange</a>
</li>
<li class="">
<a href="#event_numVisibleChange">numVisibleChange</a>
</li>
<li class="">
<a href="#event_pageChange">pageChange</a>
</li>
<li class="">
<a href="#event_render">render</a>
</li>
<li class="">
<a href="#event_revealAmountChange">revealAmountChange</a>
</li>
<li class="">
<a href="#event_scrollIncrementChange">scrollIncrementChange</a>
</li>
<li class="">
<a href="#event_selectedItemChange">selectedItemChange</a>
</li>
<li class="">
<a href="#event_selectOnScrollChange">selectOnScrollChange</a>
</li>
<li class="">
<a href="#event_show">show</a>
</li>
<li class="">
<a href="#event_startAutoPlay">startAutoPlay</a>
</li>
<li class="">
<a href="#event_stopAutoPlay">stopAutoPlay</a>
</li>
</ul>
</div>
<div class="module">
<h4>Configuration Attributes</h4>
<ul class="content">
<li class="">
<a href="#config_animation">animation</a>
</li>
<li class="">
<a href="#config_autoPlay">autoPlay</a>
</li>
<li class="">
<a href="#config_currentPage">currentPage</a>
</li>
<li class="">
<a href="#config_firstVisible">firstVisible</a>
</li>
<li class="">
<a href="#config_isCircular">isCircular</a>
</li>
<li class="">
<a href="#config_isVertical">isVertical</a>
</li>
<li class="">
<a href="#config_navigation">navigation</a>
</li>
<li class="">
<a href="#config_numItems">numItems</a>
</li>
<li class="">
<a href="#config_numVisible">numVisible</a>
</li>
<li class="">
<a href="#config_revealAmount">revealAmount</a>
</li>
<li class="">
<a href="#config_scrollIncrement">scrollIncrement</a>
</li>
<li class="">
<a href="#config_selectedItem">selectedItem</a>
</li>
<li class="">
<a href="#config_selectOnScroll">selectOnScroll</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="ft">
<hr />
Copyright &copy; 2008 Yahoo! Inc. All rights reserved.
</div>
</div>
</body>
</html>