moo.rd - Docs - tabs.js

Allows to create professional tab-based interfaces with many additional controls, like the scrolling effect,the autoresizing, the opening tab and more. Note that in the Tabs namespacing, the 'tabs' representthe contents while the 'sections' represent the handlers (the list items).

Extends

Constructor

new Tabs(element, options)

Properties

element		the container element
options		the Tabs options. See below

Options

effect		the transition effect used to change the tabs. Can be 'scroll' or 'fix'
autoresize		if true the tabs will be autoresized. Default is true.
scrollOptions		the additional Fx.Scroll options
opening		the tab which will be activated at first. Default is 0.
openingEffect		the opening effect, 'scroll' or 'fix' (default). Can be different from the 'effect' option.
names		an object containing the class names of the sections represent the Tabs interface. See below.

names:

wrapper: the class name of the wrapper which contains the tabs. Default is 'tabs'
sections: the class name of the list element that contains the sections. Deafukt is 'sections'
tab: the class name of the elements represent the tabs. Default is 'tab'

Events

onOpen		function fired if the 'opening' option is a number represents a tab. The tab element and its position will be passed as arguments.
onChange		function fired when an user changes to another tab. The tab element, the section and the tab position will be passed as arguments.

Example

 var tabs = new Tabs('main', {
	autoresize: false,
	opening: 2,
	openingEffect: 'scroll',
	effect: 'fix',
	onChange: function(tab, section, i) {
		this.sections.removeClass('active');
		section.addClass('active');
	}
 });

Documentation By Riccardo Degni - powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the Creative Commons BY-NC SA License