API

Full API documentation.

ch.Tabs

Description

Tabs lets you create tabs for static and dynamic content.

How-to

// Create a new Tabs.
var tabs = new ch.Tabs($el);
// Create a new Tabs with jQuery or Zepto.
var tabs = $(selector).tabs();

Parameters

  • $el - jQuerySelector | ZeptoSelector : A jQuery or Zepto Selector to create an instance of ch.Tabs.

Extends

Properties

.$container jQuerySelector | ZeptoSelector

The tabs container.

.$panel jQuerySelector | ZeptoSelector

The container of tab panels.

.$triggers jQuerySelector | ZeptoSelector

The tabs triggers.

.Component#name String

The name of a component.

// You can reach the associated instance.
var component = $(selector).data(name);

.tabpanels Array

A collection of tab panel.

.Tabs#name String

The name of the component.

// You can reach the associated instance.
var tabs = $(selector).data('tabs');

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}



    

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}



    

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}



    

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

.disable(tab) → {tabs}



    

Disables an instance of Tabs or a specific tab panel.

  • tab - Number : A given number of tab panel to disable.
// Disabling an instance of Tabs.
tabs.disable();
// Disabling the second tab panel.
tabs.disable(2);

.enable(tab) → {tabs}



    

Enables an instance of Tabs or a specific tab panel.

  • tab - Number : A given number of tab panel to enable.
// Enabling an instance of Tabs.
tabs.enable();
// Enabling the second tab panel of a tabs.
tabs.enable(2);

.emit(event, var_args) → {component}



    

Execute each item in the listener collection in order with the specified data.

  • event - String : The name of the event you want to emit.
  • var_args - Object : Data to pass to the listeners.
// Will emit the 'ready' event with 'param1' and 'param2' as arguments.
component.emit('ready', 'param1', 'param2');

.getListeners(event) → {Array}



    

Returns all listeners from the collection for a specified event.

  • event - String : The event name.
// Returns listeners from 'ready' event.
component.getListeners('ready');

.off(event, listener) → {component}



    

Removes a listener from the collection for a specified event.

  • event - String : Event name.
  • listener - function : Listener function.
// Will remove event listener to 'ready' event.
component.off('ready', listener);

.on(event, listener, once) → {component}



    

Adds a listener to the collection for a specified event.

  • event - String : The event name to subscribe.
  • listener - function : Listener function.
  • once - Boolean : Indicate if a listener function will be called only one time.
// Will add an event listener to 'ready' event.
component.on('ready', listener);

.once(event, listener) → {component}



    

Adds a listener to the collection for a specified event to will execute only once.

  • event - String : Event name.
  • listener - function : Listener function.
// Will add an event handler to 'contentLoad' event once.
component.once('contentLoad', listener);

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys a Tabs instance.

// Destroying an instance of Tabs.
tabs.destroy();

.getShown() → {Boolean}



    

Returns the number of the shown tab panel.

if (tabs.getShown() === 1) {
    fn();
}

.show(tab) → {tabs}



    

Shows a specific tab panel.

  • tab - Number : A given number of tab panel.
// Shows the second tab panel.
tabs.show(2);

Events

'destroy'



    

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'



    

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'



    

Emits when a component is enabled.

// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});

'hide'



    

Event emitted when a tab hide a tab panel container.

// Subscribe to "hide" event.
tabs.on('hide', function () {
    // Some code here!
});

'hide'



    

Event emitted when a tab hide a tab panel container.

// Subscribe to "hide" event.
tabs.on('hide', function () {
    // Some code here!
});

'ready'



    

Emits the event 'ready' when the component is ready to use.

// Subscribe to "ready" event.
tabs.on('ready',function () {
    this.show();
});

'show'



    

Event emitted when the tabs shows a tab panel container.

// Subscribe to "show" event.
tabs.on('show', function (shownTab) {
    // Some code here!
});