Yahoo! UI Library

Carousel Widget  2.6.0

Yahoo! UI Library > carousel > YAHOO.widget.Carousel

Class YAHOO.widget.Carousel - extends YAHOO.util.Element

The Carousel widget.

Constructor

YAHOO.widget.Carousel ( el , cfg )
Parameters:
el <HTMLElement | String> The HTML element that represents the the container that houses the Carousel.
cfg <Object> (optional) The configuration values

Properties

BUTTON - object

The class name of the Carousel navigation buttons.
Default Value: "yui-carousel-button"

CAROUSEL - object

The class name of the Carousel element.
Default Value: "yui-carousel"

CAROUSEL_EL - object

The class name of the container of the items in the Carousel.
Default Value: "yui-carousel-element"

CONTAINER - object

The class name of the Carousel's container element.
Default Value: "yui-carousel-container"

CONTENT - object

The class name of the Carousel's container element.
Default Value: "yui-carousel-content"

DISABLED - object

The class name of a disabled navigation button.
Default Value: "yui-carousel-button-disabled"

FIRST_NAV - object

The class name of the first Carousel navigation button.
Default Value: " yui-carousel-first-button"

FIRST_NAV_DISABLED - object

The class name of a first disabled navigation button.
Default Value: "yui-carousel-first-button-disabled"

FIRST_PAGE - object

The class name of a first page element.
Default Value: "yui-carousel-nav-first-page"

FIRST_VISIBLE - object

The offset of the first visible item in the Carousel.
Default Value: 0

FOCUSSED_BUTTON - object

The class name of the Carousel navigation button that has focus.
Default Value: "yui-carousel-button-focus"

HORIZONTAL - object

The class name of a horizontally oriented Carousel.
Default Value: "yui-carousel-horizontal"

ITEM_LOADING - object

The element to be used as the progress indicator when the item is still being loaded.
Default Value: The progress indicator (spinner) image

ITEM_TAG_NAME - object

The tag name of the Carousel item.
Default Value: "LI"

MAX_PAGER_BUTTONS - object

The maximum number of pager buttons allowed beyond which the UI of the pager would be a drop-down of pages instead of buttons.
Default Value: 5

MIN_WIDTH - object

The minimum width of the Carousel container to support the navigation buttons.
Default Value: 99

NAV_CONTAINER - object

The class name for the navigation container for prev/next.
Default Value: "yui-carousel-buttons"

NAVIGATION - object

The navigation element container class name.
Default Value: "yui-carousel-nav"

NEXT_BUTTON_TEXT - object

The next navigation button name/text.
Default Value: "Next Page"

NEXT_PAGE - object

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.
Default Value: "yui-carousel-next"

NUM_VISIBLE - object

The number of visible items in the Carousel.
Default Value: 3

PAGER_PREFIX_TEXT - object

The prefix text for the pager in case the UI is a drop-down.
Default Value: "Go to page "

PREV_PAGE - object

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.
Default Value: "yui-carousel-prev"

PREVIOUS_BUTTON_TEXT - object

The previous navigation button name/text.
Default Value: "Previous Page"

SELECTED_ITEM - object

The class name of the selected item.
Default Value: "yui-carousel-item-selected"

SELECTED_NAV - object

The class name of the selected paging navigation.
Default Value: "yui-carousel-nav-page-selected"

TAG_NAME - object

The tag name of the Carousel.
Default Value: "OL"

VERTICAL - object

The class name of a vertically oriented Carousel.
Default Value: "yui-carousel-vertical"

VERTICAL_CONTAINER - object

The class name of the (vertical) Carousel's container element.
Default Value: "yui-carousel-vertical-container"

VISIBLE - object

The class name of a visible Carousel.
Default Value: "yui-carousel-visible"

Properties inherited from YAHOO.util.Element:

DOM_EVENTS

Properties inherited from YAHOO.util.AttributeProvider:

Properties inherited from YAHOO.util.EventProvider:

Methods

addItem

Boolean addItem ( item , index )
Insert or append an item to the Carousel.
Parameters:
item <String | Object | HTMLElement> 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.
index <Number> optional The position to where in the list (starts from zero).
Returns: Boolean
Return true on success, false otherwise

addItems

Boolean addItems ( items )
Insert or append multiple items to the Carousel.
Parameters:
items <Array} An array of items to be added with each item representing an item, index pair [{item, index> , ...]
Returns: Boolean
Return true on success, false otherwise

blur

void blur ( )
Remove focus from the Carousel.
Returns: void

clearItems public

void clearItems public ( )
Clears the items from Carousel.
Returns: void

focus

void focus ( )
Set focus on the Carousel.
Returns: void

getById

static void getById ( )
Return the appropriate Carousel object based on the id associated with the Carousel element or false if none match.
Returns: void

getElementForItem

Element getElementForItem ( index )
Return the ITEM_TAG_NAME at index or null if the index is not found.
Parameters:
index <Number> The index of the item to be returned
Returns: Element
Return the item at index or null if not found

getElementForItems

Array getElementForItems ( )
Return the ITEM_TAG_NAME for all items in the Carousel.
Returns: Array
Return all the items

getItem

Object getItem ( index )
Return the item at index or null if the index is not found.
Parameters:
index <Number> The index of the item to be returned
Returns: Object
Return the item at index or null if not found

getItemPositionById

void getItemPositionById ( index )
Return the position of the Carousel item that has the id "id", or -1 if the id is not found.
Parameters:
index <Number> The index of the item to be returned
Returns: void

getItems

Array getItems ( )
Return all items as an array.
Returns: Array
Return all items in the Carousel

hide

void hide ( )
Hide the Carousel.
Returns: void

init

void init ( el , attrs )
Initialize the Carousel.
Parameters:
el <HTMLElement | String> The html element that represents the Carousel container.
attrs <Object> The set of configuration attributes for creating the Carousel.
Returns: void

initAttributes

void initAttributes ( attrs )
Initialize the configuration attributes used to create the Carousel.
Parameters:
attrs <Object> The set of configuration attributes for creating the Carousel.
Returns: void

initEvents

void initEvents ( )
Initialize and bind the event handlers.
Returns: void

removeItem

Boolean removeItem ( index )
Remove an item at index from the Carousel.
Parameters:
index <Number> The position to where in the list (starts from zero).
Returns: Boolean
Return true on success, false otherwise

render

Boolean render ( appendTo )
Render the Carousel.
Parameters:
appendTo <HTMLElement | String> The element to which the Carousel should be appended prior to rendering.
Returns: Boolean
Status of the operation

scrollBackward

void scrollBackward ( )
Scroll the Carousel by an item backward.
Returns: void

scrollForward

void scrollForward ( )
Scroll the Carousel by an item forward.
Returns: void

scrollTo

void scrollTo ( item , dontSelect )
Scroll the Carousel to make the item the first visible item.
Parameters:
item <object> Number The index of the element to position at.
dontSelect <object> Boolean True if select should be avoided
Returns: void

show

void show ( )
Display the Carousel.
Returns: void

startAutoPlay

void startAutoPlay ( )
Start auto-playing the Carousel.
Returns: void

stopAutoPlay

void stopAutoPlay ( )
Stop auto-playing the Carousel.
Returns: void

toString

String toString ( )
Return the string representation of the Carousel.
Returns: String

Methods inherited from YAHOO.util.Element:

addClass, addListener, appendChild, appendTo, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeListener, replaceChild, replaceClass, setStyle, subscribe

Methods inherited from YAHOO.util.AttributeProvider:

fireBeforeChangeEvent, fireChangeEvent, get, getAttributeKeys, refresh, resetValue, set, setAttributeConfig, setAttributes

Methods inherited from YAHOO.util.EventProvider:

createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll

Events

afterScroll

afterScroll ( )
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 Element.addListener for more information on listening for this event.

animationChange

animationChange ( event )
Fires when the value for the configuration attribute 'animation' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

autoPlayChange

autoPlayChange ( event )
Fires when the value for the configuration attribute 'autoPlay' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAnimationChange

beforeAnimationChange ( event )
Fires before the value for the configuration attribute 'animation' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeAutoPlayChange

beforeAutoPlayChange ( event )
Fires before the value for the configuration attribute 'autoPlay' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeCurrentPageChange

beforeCurrentPageChange ( event )
Fires before the value for the configuration attribute 'currentPage' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeFirstVisibleChange

beforeFirstVisibleChange ( event )
Fires before the value for the configuration attribute 'firstVisible' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeHide

beforeHide ( )
Fires before the Carousel is hidden. See Element.addListener for more information on listening for this event.

beforeIsCircularChange

beforeIsCircularChange ( event )
Fires before the value for the configuration attribute 'isCircular' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeIsVerticalChange

beforeIsVerticalChange ( event )
Fires before the value for the configuration attribute 'isVertical' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeNavigationChange

beforeNavigationChange ( event )
Fires before the value for the configuration attribute 'navigation' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeNumItemsChange

beforeNumItemsChange ( event )
Fires before the value for the configuration attribute 'numItems' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeNumVisibleChange

beforeNumVisibleChange ( event )
Fires before the value for the configuration attribute 'numVisible' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforePageChange

beforePageChange ( )
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 Element.addListener for more information on listening for this event.

beforeRevealAmountChange

beforeRevealAmountChange ( event )
Fires before the value for the configuration attribute 'revealAmount' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeScroll

beforeScroll ( )
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 Element.addListener for more information on listening for this event.

beforeScrollIncrementChange

beforeScrollIncrementChange ( event )
Fires before the value for the configuration attribute 'scrollIncrement' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeSelectedItemChange

beforeSelectedItemChange ( event )
Fires before the value for the configuration attribute 'selectedItem' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeSelectOnScrollChange

beforeSelectOnScrollChange ( event )
Fires before the value for the configuration attribute 'selectOnScroll' changes. Return false to cancel the attribute change.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

beforeShow

beforeShow ( )
Fires when the Carousel is about to be shown. See Element.addListener for more information on listening for this event.

blur

blur ( )
Fires when the Carousel loses focus. See Element.addListener for more information on listening for this event.

currentPageChange

currentPageChange ( event )
Fires when the value for the configuration attribute 'currentPage' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

firstVisibleChange

firstVisibleChange ( event )
Fires when the value for the configuration attribute 'firstVisible' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

focus

focus ( )
Fires when the Carousel gains focus. See Element.addListener for more information on listening for this event.

hide

hide ( )
Fires when the Carousel is hidden. See Element.addListener for more information on listening for this event.

isCircularChange

isCircularChange ( event )
Fires when the value for the configuration attribute 'isCircular' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

isVerticalChange

isVerticalChange ( event )
Fires when the value for the configuration attribute 'isVertical' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

itemAdded

itemAdded ( )
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 Element.addListener for more information on listening for this event.

itemRemoved

itemRemoved ( )
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 Element.addListener for more information on listening for this event.

itemSelected

itemSelected ( )
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 Element.addListener for more information on listening for this event.

loadItems

loadItems ( )
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 Element.addListener for more information on listening for this event.

navigationChange

navigationChange ( event )
Fires when the value for the configuration attribute 'navigation' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

navigationStateChange

navigationStateChange ( )
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 Element.addListener for more information on listening for this event.

numItemsChange

numItemsChange ( event )
Fires when the value for the configuration attribute 'numItems' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

numVisibleChange

numVisibleChange ( event )
Fires when the value for the configuration attribute 'numVisible' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

pageChange

pageChange ( )
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 Element.addListener for more information on listening for this event.

render

render ( )
Fires when the Carousel is rendered. See Element.addListener for more information on listening for this event.

revealAmountChange

revealAmountChange ( event )
Fires when the value for the configuration attribute 'revealAmount' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

scrollIncrementChange

scrollIncrementChange ( event )
Fires when the value for the configuration attribute 'scrollIncrement' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

selectedItemChange

selectedItemChange ( event )
Fires when the value for the configuration attribute 'selectedItem' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

selectOnScrollChange

selectOnScrollChange ( event )
Fires when the value for the configuration attribute 'selectOnScroll' changes.
Parameters:
event <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

show

show ( )
Fires when the Carousel is shown. See Element.addListener for more information on listening for this event.

startAutoPlay

startAutoPlay ( )
Fires when the auto play has started in the Carousel. See Element.addListener for more information on listening for this event.

stopAutoPlay

stopAutoPlay ( )
Fires when the auto play has been stopped in the Carousel. See Element.addListener for more information on listening for this event.

Events inherited from YAHOO.util.Element:

appendTo, available, beforeAppendTo, beforeElementChange, contentReady, elementChange,

Configuration Attributes

animation - Object

The optional animation attributes for the Carousel.
Default Value:
{ speed: 0, // the animation speed (in seconds)
effect: null } // the animation effect (like YAHOO.util.Easing.easeOut)

autoPlay - Number

Set this to time in milli-seconds to have the Carousel automatically scroll the contents.

currentPage - Number

The current page number (read-only.)

firstVisible - Number

The index to start the Carousel from (indexes begin from zero)
Default Value: 0

isCircular - Boolean

Set this to true to wrap scrolling of the contents in the Carousel.
Default Value: false

isVertical - Boolean

True if the orientation of the Carousel is vertical
Default Value: false

navigation - Object

The set of navigation controls for Carousel
Default Value:
{ prev: null, // the previous navigation element
next: null } // the next navigation element

numItems - Number

The number of items in the Carousel.

numVisible - Number

The number of visible items in the Carousel's viewport.
Default Value: 3

revealAmount - Number

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.)
Default Value: 0

scrollIncrement - Number

The number of items to scroll by for arrow keys.
Default Value: 1

selectedItem - Number

The index of the selected item.

selectOnScroll - Boolean

Set this to true to automatically set focus to follow scrolling in the Carousel.
Default Value: true

Configuration attributes inherited from YAHOO.util.Element:

element,

Modules

Classes

Files

Properties

Methods

Events

Configuration Attributes

Copyright © 2008 Yahoo! Inc. All rights reserved.