About

This is a simple Tab class to illustrate how to use moo4q (mootools for jQuery.) It has a handful of methods for creating a basic tab plugin. Moo4q automatically extends the jQuery prototype with a tab method so using the plugin has a familiar syntax:

// jQuery API
$('#pane').tabs(options)

// regular javascript
var myTabs = new Tabs('#pane', options);

Looking at the source is the best way to see what's going on, it's full of comments too. But this page also has some good information as you click through the tabs.

Options & Events

Think of options as "defaults" or "settings" of regular jQuery plugins. If you don't provide any, your instance will use the default options. You pass the options in to a moo4q class the same as a regular plugin:

$('#pane').tabs({
  tab: 'a', 
  content: '.section'
});

MooTools classes can have their own custom events. This class has a show event. In jQuery they are often called "callbacks." This tab instance added an event like this: #('#pane').tabs('addEvent','show', fn), and the function toggles the class the of the body, you'll notice the background color changes as you click through the tabs.

Managing State

When you use $('#pane').tabs(), you're creating a new instance of Tabs and storing it on the jQuery object returned for $('#pane'). You can manage the state of that object very easily. Open the console in webkit or firebug and type

$('#pane').tabs('show', 0)

Or just click this button show!