moo.rd - Examples - tabs

An example that shows how to work with the Tabs component. In the first Tab there's a scrolling tab with no autoresize. The "Example" tab is set to be the starting tab.
In the second tab we have a fixed interface with autoresize.

docs reference js code

window.addEvent('domready', function() {
 
	var tabs = new Tabs('main', {
		autoresize: false,
		opening: 2,
		openingEffect: 'scroll',
		onChange: function(tab, section, i) {
			this.sections.removeClass('active');
			section.addClass('active');
		}
	});
 
	var fixed_tabs = new Tabs('main2', {
		effect: 'fix',
		onChange: function(tab, section, i) {
			this.sections.removeClass('active');
			section.addClass('active');
		}
	});
 
	$$('ul.sections li').addEvents({
		'mouseover': function() {
			this.addClass('hovered');
		},
		'mouseout': function() {
			this.removeClass('hovered');
		}
	});
 
});

Scrolling Tabs with autoresize disabled

Docs
Download
Examples
Author

Docs Tab

The moo.rd documentation provides a full featured guide on how to use the library and extend it with additional features.

Download Tab

The moo.rd downloads allows you to build your customized version out with ease. You have only to choose the components you want, the compression type and whether include MooTools.

Examples Tab

The moo.rd examples section is the place where you can try moo.rd out. You can play with the amazing amount of demos and learn how to use moo.rd into your applications.

Blog Tab

The moo.rd blog is the official moo.rd magazine. There you can find news, tutorials, tips and suggestions about the library.

Fixed Tabs with autoresize enabled

Docs
Download
Examples
Author

Docs Tab

The moo.rd documentation provides a full featured guide on how to use the library and extend it with additional features.

Download Tab

This is a collection of demos which explains how moo.rd works and how to work with moo.rd. Here you can play with the constructors of the latest version to test them out and see every sourcecodes. It's good for tests and comparisons. This is a collection of demos which explains how moo.rd works and how to work with moo.rd. Here you can play with the constructors of the latest version to test them out and see every sourcecodes. It's good for tests and comparisons. This is a collection of demos which explains how moo.rd works and how to work with moo.rd. Here you can play with the constructors of the latest version to test them out and see every sourcecodes. It's good for tests and comparisons. This is a collection of demos which explains how moo.rd works and how to work with moo.rd. Here you can play with the constructors of the latest version to test them out and see every sourcecodes. It's good for tests and comparisons.

Examples Tab

Author Tab