ch.Carousel (Class)

Documentation updated on Fri May 18 2012 12:47:07 GMT-0300 (GMT-03:00), generated by JsDoc Toolkit 2.4.0

Overview

Carousel is a large list of elements.

• Constructor name: ch.Carousel(conf)
• ch.Carousel extends ch.Uiobject.
• View source on GitHub.

Summary

Classdetail

Parameters

• conf: Object, Optional. Object with configuration properties.
• conf.width: Number || String, Optional. Sets width property of the component's layout. By default, the width is elastic.
• conf.height: Number || String, Optional. Sets height property of the component's layout. By default, the value is the
• element height.
• conf.pagination: Boolean, Optional. Shows a pagination. By default, the value is false.
• conf.arrows: Boolean, Optional. Shows arrows icons to move over the pages. By default, the value is true.
• conf.asyncData: Array, Optional. Defines the content of each item that will be load asnchronously as array.
• conf.asyncRender: Function, Optional. The function that receives asyncData content and must return a string with result of manipulate that content.
• conf.fx: Boolean, Optional. Enable or disable UI effects. By default, the effects are enable.

Returns

• itself

Requires

• ch.List

// Create a new carousel with some configuration.
var me = $(".example").carousel({
    "width": 500,
    "height": "200px",
    "pagination": true,
    "arrows": false,
    "asyncData": [
        {src: 'a.png', alt: 'A'},
        {src: 'b.png', alt: 'B'},
        {src: 'c.png', alt: 'C'}
    ],
    "asyncRender": function (data) {
        return '';
    },
    "fx": false
});

// Create a new carousel without configuration.
var me = $(".example").carousel();

Properties detail

$collection (protected, jQuery Object)

HTMLLiElement with a list of items.

$content (protected, jQuery Object)

Element that will move for both directions.

$items (protected, jQuery Object)

Each item into collection.

$mask (protected, jQuery Object)

Mask that hides the overflow of content.

currentPage (protected, Number)

The page that is selected.

element (public, HTMLDivElement)

Public reference to element that was used to init the component.

extraWidth (private, Number)

Extra size calculated on content. Fix issues of collection size in IE6.

getItemsPerPage (public)

Deprecated - Get the items amount of each page.

Returns

• Number

itemsMargin (protected, Number)

CSS margin between each item.

itemsPerPage (public)

Get the items amount of each page (Since 0.7.4).

Returns

• Number

itemsTotal (protected, Number)

Amount of items into collection and items on queue.

itemsWidth (protected, Number)

Reference to items width.

maskWidth (private, Number)

Size of Carousel mask.

pages (protected, Number)

Total amount of pages.

queue (protected, Array)

List of items that should be loaded asynchronously on page movement.

resizing (private, Boolean)

Resize status of Window.

that (protected, Object)

Reference to a internal component instance, saves all the information and configuration properties.

type (public, String)

The component's type.

uid (public, Number)

The component's instance unique identifier.

Methods detail

addItems (protected)

Move items from queue to collection.

Parameters

• amount: Number. Amount of items that will be added.

asyncItemsLoad (protected)

Analizes if next page needs to load items from queue and execute addItems() method.

createArrows (private)

Creates Previous and Next arrows.

createLayout (private)

Does what is necessary to make ready the component structure.

createPagination (private)

Creates Carousel pagination.

draw (private)

Calculates all necesary data to draw Carousel correctly.

getPage (public)

Deprecated - Gets the current page.

Returns

• Number

getPages (private, Number)

Calculates total amount of pages.

Returns

• Total amount of pages (Number)

goTo (public)

Deprecated - Moves to a defined page. Only works when Carousel hasn't asynchronous item load.

// Create a Carousel
var foo = $("bar").carousel();

// Go to second page
foo.goTo(2);

Parameters

• page: Number. Page to be moved.

Returns

• Chico UI Object

manageArrows (protected)

Manages arrows turning it on and off when non-continue Carousel is moving.

Parameters

• page: Number. Page to be moved.

managePagination (protected)

Removes the active status classname of last selected page and adds it to the selected page.

Parameters

• page: Number. Page to be moved.

next (public)

Moves to the next page.

// Create a carousel
var foo = $("bar").carousel();

// Go to next page
foo.next();

Returns

• Chico UI Object

page (public)

Gets the current page or moves to a defined page (Since 0.7.4).

// Create a Carousel
var foo = $("bar").carousel();

// Go to second page
foo.page(2);

// Get the current page
foo.page();

Parameters

• page (Since : Number. Page to be moved.

Returns

• Chico UI Object

prev (public)

Moves to the previous page.

// Create a Carousel
var foo = $("bar").carousel();

// Go to previous page
foo.prev();

Returns

• Chico UI Object

redraw (public)

Re-calculate positioning, sizing, paging, and re-draw.

// Create a Carousel
var foo = $("bar").carousel();

// Re-draw Carousel
foo.redraw();

Returns

• Chico UI Object

select (public)

Moves to a defined page (Since 0.7.5).

// Create a Carousel
var foo = $("bar").carousel();

// Go to second page
foo.select(2);

Parameters

• page (Since : Number. Page to be moved.

Returns

• Chico UI Object

Events detail

itemsAdded (public)

Triggers when component adds items asynchronously from queue.

example.on("itemsAdded", function () {
	alert("Some asynchronous items was added.");
});

move (public)

Deprecated: Triggers when component moves to next or previous page.

example.on("move", function () {
	alert("I moved!");
});

next (public)

Triggers when component moves to next page.

example.on("next", function () {
	alert("Next!");
});

prev (public)

Triggers when component moves to previous page.

example.on("prev", function () {
	alert("Previous!");
});

ready (public)

Triggers when the component is ready to use (Since 0.8.0).

// Following the first example, using 'me' as carousel's instance controller:
me.on("ready",function () {
	this.itemsPerPage();
});

select (public)

Since 0.7.9: Triggers when component moves to next or previous page.

example.on("select", function () {
	alert("An item was selected!");
});