PrototypeXtensions.js - Unobstrusive CSS Tabs

Unobstrusive CSS tabs

Here is the XHTML code used for demo #example :

<div id="example" class="theme-tabs">
    <ul class="nav">
        <li class="tab-show"><a href="#one">One</a></li>
        <li class="tab-show"><a href="#two">Two</a></li>
        <li class="tab-show"><a href="#three">Three</a></li>
    </ul>
    <div id="one"   class="panel-show">This is first tab</div>
    <div id="two"   class="panel-show">This is second tab (static content)</div>
    <div id="three" class="panel-show">This is third tab</div>
</div>

Initialize tabs

This method is the most simple and convenient.
Indeed, the use of design pattern Singleton allows to recover the unique instance through this function

$('example').tabs();

Initialize tabs with options

You can configure your tabs with an local javascript object.
Go to "Options" tab to see a summary of available options

$('example').tabs({
    defaultActive : 'two'
});

Initialize tabs by the traditional method

This method is syntactically heavier, it is less easy to manage tabs

var tabs = new Tabs($('example'), {
    defaultActive : 1
});

Manipulate tabs

Now that the tabs are initialized, you can easily retrieve a precise tab by its index or its unique identifier:

var example = $('example').tabs();

// Get second tab
var secondTab = example.get(1);

// is equivalent to :
var secondTab = example.get('two');

// then you will be able to carry out specific actions on a tab, for example, select :
firstTab.select();

// Note that it is possible to do the same thing with less code :
$('example').tabs().get('two').select();
$('example').tabs().select('two');

Hide tab

$('example').tabs().hide('two');

// is equivalent to :
$('example').tabs().get('two').hide();

Show tab

Show only the tab

$('example').tabs().show('two');

// is equivalent to :
$('example').tabs().get('two').show();

Show tab and panel (select it)

$('example').tabs().show('two', true);

// is equivalent to :
$('example').tabs().get('two').show(true);

Toggle

Toggle only the tab

$('example').tabs().get('two').toggle();

Toggle tab and panel (select it)

$('example').tabs().get('two').toggle(true);

Custom events

Two events are provided. It allows you to perform specific actions when the user show/hide a tab. For example, you can define visual effects from script.aculo.us.

After clicking the two buttons 'Execute', try to show / hide the tab 'Two' (with the buttons below)

show

is called when user show the tab :

var tab = $('example').tabs().get('two');

tab.observe('show', function(tab) {
    new Effect.Appear(tab.getItem());
    new Effect.Appear(tab.getPanel());
});

hide

is called when the tab is hided :

tab.observe('hide', function(tab) {
    new Effect.Hide(tab.getItem());
    new Effect.Hide(tab.getPanel());
});

Select tab

Two methods are proposed: the first is the shortest, in fact, is an alias of the second.

$('example').tabs().select('two');
        
// is equivalent to :
$('example').tabs().get('two').select();

Utility methods

Select first tab

You can select the first created tab with this feature :

$('example').tabs().selectFirst();

Select last tab

You can select the last created tab with this feature :

$('example').tabs().selectLast();

Custom events

Two events are provided. It allows you to perform specific actions when the user (un)selects a tab. An example of use can be seen in the History page, clicking on the tab 'Ajax.History', for example, the box will appear.

After clicking the two buttons 'Execute', try to select / unselect the tab 'Two'.

select

is called when user select the tab :

var tab = $('example').tabs().get('two');

tab.observe('select', function(tab) {
    var panelId = tab.getPanel().id;
    $('box-example').setStyle({background:'red'});
    $('box-example').insert('tab -'+ panelId +'- is selected <br/>');
});

unselect

is called when the tab is unselected (generally when the user selects another tab) :

tab.observe('unselect', function(tab) {
    var panelId = tab.getPanel().id;
    $('box-example').setStyle({background:'white'});
    $('box-example').insert('tab -'+ panelId +'- is unselected <br/>');
});

Ajax tab

Prototype.Xtensions.Tabs provides a simple and flexible system allowing you to load one or several different AJAX applications in a tab. (Almost) everything is customizable!

Automatic loading on selection of tab

Note that if you define the parameters of your request at the initalisation, loading of the tab via Ajax will be done automatically when selecting the tab.
Also note that the automatic loading by the selection is performed only one single time in the first selection of the tab. This avoids loading the tab whenever the user selects the tab.

Setting up an Ajax request

This method is the most simple and convenient.
Indeed, the use of design pattern Singleton allows to recover the unique instance through this function

Name	Default value	Required	Description
type	'ajax'	No	The type of methodology used to load the application. Must be 'ajax' or 'iframe'.
url	null	Yes	Url of your request
options	{}	No	This parameter is used only with the type 'ajax'. It allows you to configure your Ajax Request.

In this example, the title of the tab will be changed to 'Loading...' during the loading of the Ajax request :

// or directly on the tab :
$('example').tabs().get('two').setRequest({
    type    : 'ajax',
    url     : '/url/to/file.html',
    options : {
        method    : 'POST',
        onLoading : function(tabs) {
            tabs.setTitle('Loading...');
        }
    }
}).reload();

Here we define the parameters of Ajax Request during the initialization of tabs. Thus, when selecting the tab, ajax request will be charged.
Note that it is possible to access directly to the 'two' tab object in the callbacks onSuccess(response, json, tabs) and onLoading(tabs). The same mechanism was implemented on all other callbacks provided by Ajax.Request.

In this example we define a specified style on panel when Ajax Request is loaded (red background and text in white). When loading the Ajax Request, the panel will contain 'Loading...' :

// on initialization :
$('example').tabs({
    requests : {
        // request configuration for tabs 'two'
        two  : {
            type    : 'ajax',
            url     : '/url/to/file.html',
            options : {
                method    : 'POST',
                onSuccess : function(transport, json, tabs) {
                    tabs.getPanel().setStyle({ background:'red', color: 'white' });
                },
                onLoading : function(tabs) {
                    tabs.getPanel().update('Loading...');
                }
            }
        }
    }
});

// For the demonstration, loading the tab
$('example').tabs().get('two').load();

Details about load/reload

// load request if and only if the request was never loaded
$('example').tabs().get('two').load();

// load request unconditionally
$('example').tabs().get('two').reload();

// note that 'reload()' is equivalent to:
tabTwo.setLoaded(false);
tabTwo.load();

Iframe tab

This method is the most simple and convenient.
Indeed, the use of design pattern Singleton allows to recover the unique instance through this function

// or directly on the tab :
$('example').tabs().get('two').setRequest({
    type    : 'ajax',
    url     : '/url/to/file.html',
    options : {
        method    : 'POST',
        onLoading : function(tabs) {
            tabs.setTitle('Loading...');
        }
    }
}).reload();

Options and xtras features

Name	Default value	Required	Description
history	true	-	Allows to use the integrated management of browsing history.
selectEvent	'click'	-	Used to define the DOM event that will trigger the selection of the tab (viewpoint user). For example, you can define 'mouseover', 'dblclick', etc. ...
defaultActive	0	-	By default, select the first tab. You can define a tab select a default while loading the page.
requests	false	No	See the tab 'Load Ajax / Iframe'.

Sortable tabs (scriptaculous)

It is possible to make the tabs sortable through a dedicated function. It is a shortcut for the use of component "Sortable" of Scriptaculous.

$('example').tabs().makeSortable({...options...});

In the next release...

Demo #example

This is first tab

This is second tab (static content)

This is third tab