Breaking News - Yetii featured in Smashing Magazine!

Yetii

Yetii stands for Yet (E)Another JavaScript Tab Interface Implementation.

There are plenty of DHTML tabs scripts out there but most of them are either poorly coded, library/framework dependend or bloated with unnecessary functionality. So I`ve decided to come up with this simple, yet functional tab interface implementation.

Features

extremely lightweight, object-oriented code
gracefull degradation in browsers without JavaScript
you can have many independend tab interfaces on a single page
you can specify initial tab »
you can customize default class names »
you can turn on automatic tabs rotation (available in two modes) »
you can add next/previous navigation »
you can nest one tab interface inside another »
you can manually invoke tab showing method »
you can define custom function to run after certain tab is clicked »
you can define custom function to run when user leaves certain tab »
you can link to certain tab on page A from page B via URL parameter »
you can turn on tab persistence feature, so the most recently clicked tab is stored inside a cookie and remembered between page refresh »

Demo

« previous | next »

Define custom function to run

You can define custom function to run after certain tab is clicked:

function customfunction (tabnumber) {
    if (tabnumber == 3) alert('You clicked tab number 3');
}

var tabber1 = new Yetii({
    id: 'tab-container-1',
    callback: customfunction
});

Manually invoke tab showing method

If needed you can invoke tab showing method like this:

<a href="#tab3" onclick="tabber1.show(3); return false;">show Tab 3</a>

Click here to show Tab 3

Nesting

You can nest tab interfaces easily but remember to set different tabclass for nested interface:

var tabber2 = new Yetii({
    id: 'demo-nested',
    tabclass: 'tab-nested'
});

Tab 1

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 2

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Next/Previous

Yetii also contains methods allowing to paginate between tabs using next/previous buttons:

var tabber1 = new Yetii({
    id: 'demo'
});

<a href="javascript:tabber1.previous()">previous</a> |
<a href="javascript:tabber1.next()">next</a>

Basic usage

Download yetii.js and include it in your webpage within <head> section. Alternatively you can put Yetii code inside your common.js file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="yetii.js"></script>
</head>

Prepare the markup:
```
<body>

<div id="tab-container-1">

    <ul id="tab-container-1-nav">
    <li><a href="#tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    </ul>

    <div class="tab" id="tab1">
    <h2>tab 1</h2>
    <p>Lorem Ipsum is simply dummy text
    of the printing and typesetting industry.</p>
    </div>

    <div class="tab" id="tab2">
    <h2>tab 2</h2>
    <p>It was popularised in the 1960s with
    the release of Letraset sheets.</p>
    </div>

</div>

</body>
```
All tabs should have correct class applied (tab in above case but this is configurable). Also all tabs should be wrapped with a container with id specified (tab-container-1 in above case). Unordered list inside a wrapper (which represents tabs buttons) should have an id constructed in following convention: wrapper-id + '-nav' (tab-container-1-nav in above case).

Note that Yetii will apply active class to selected tab link dynamically:
```
<ul id="tab-container-1-nav">
<li class="activeli"><a class="active" href="#tab1">tab 1</a></li>
<li><a href="#tab2">tab 2</a></li>
</ul>
```
By convention Yetii will also apply activeli class to list item holding selected tab link. All classes set in markup for list items and links are preserved when adding active classes. If you change default active class name from active to something else (i.e. selected), list item will be marked with selectedli class.

Initialize Yetii object:

<body>

<div id="tab-container-1">

    <ul id="tab-container-1-nav">
    <li><a href="#tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    </ul>

    <div class="tab" id="tab1">
    <h2>tab 1</h2>
    <p>Lorem Ipsum is simply dummy text
    of the printing and typesetting industry.</p>
    </div>

    <div class="tab" id="tab2">
    <h2>tab 2</h2>
    <p>It was popularised in the 1960s with
    the release of Letraset sheets.</p>
    </div>

</div>

<script type="text/javascript">
var tabber1 = new Yetii({
id: 'tab-container-1'
});
</script>

</body>

Advanced usage

If you would like to specify initial tab (i.e. second):

var tabber1 = new Yetii({
id: 'tab-container-1',
active: 2
});

If you would like to override default class names:

var tabber1 = new Yetii({
id: 'tab-container-1',
active: 2,
interval: 5,
tabclass: 'mycustomclass',
activeclass: 'mycustomactivetabclass'
});

If you would like to turn on automatic tabs rotation (specify time interval in seconds):
```
var tabber1 = new Yetii({
id: 'tab-container-1',
active: 2,
interval: 5
});
```
Rotation stops when user starts interacting with tabs. However if you specify wait parameter:
```
var tabber1 = new Yetii({
id: 'tab-container-1',
active: 2,
interval: 5,
wait: 10
});
```
and user clicks any tab, rotation will continue after the number of seconds defined by wait parameter.

Yetii also contains methods allowing to paginate between tabs using your own next/previous buttons (see Demo section):

var tabber1 = new Yetii({
id: 'demo'
});

<a href="javascript:tabber1.previous()">previous</a> |
<a href="javascript:tabber1.next()">next</a>

You can nest tab interfaces easily but remember to set different tabclass for nested interface:

var tabber1 = new Yetii({
id: 'demo'
});

var tabber2 = new Yetii({
id: 'demo-nested',
tabclass: 'tab-nested'
});

If needed you can invoke tab showing method like this:

<a href="#tab3" onclick="tabber1.show(3); return false;">show Tab 3</a>

You can define custom function to run after certain tab is clicked:

function customfunction(tabnumber) {
if (tabnumber==3) alert('You clicked tab number 3');
}

var tabber1 = new Yetii({
id: 'tab-container-1',
callback: customfunction
});

You can define custom function to run when user leaves certain tab:

function customfunction(tabnumber) {
if (tabnumber==1) alert('Leaving tab ' + i + ' ...');
}

var tabber1 = new Yetii({
id: 'tab-container-1',
leavecallback: customfunction
});

You can define a link on another page that selects a tab on the target page (one containing Yetii script) when the page is loaded. Assuming that you have placed following tab interface on page A:
```
var tabber1 = new Yetii({
id: 'tab-container-1'
});
```
The following link (presumably on page B) causes the 2nd tab within the above Yetii instance to be selected by default when page A loads:
```
<a href="pageA.html?tab-container-1=2">2nd tab within tab-container-1 on page A</a>
```
You can also use tab's DOM id instead of numerical value:
```
<a href="pageA.html?tab-container-1=tab2">2nd tab within tab-container-1 on page A</a>
```
Also you can pass tab's DOM id inside location.hash:
```
<a href="pageA.html#tab2">2nd tab within tab-container-1 on page A</a>
```
If you would like to turn on tab persistence feature (so the most recently clicked on tab is remembered even if the page is reloaded):
```
var tabber1 = new Yetii({
id: 'tab-container-1',
persist: true
});
```
Persistence is based on session cookies (expiring as soon as one closes the browser). In situations where persistence is on, there is an URL parameter and also active parameter is specified, following importance hierarchy is used:

most important persistence « URL parameter « active parameter least important

Download

yetii.js & yetii-min.js (compressed) (ZIP)

To Do

tab change animation using CSS opacity
dynamic tab content retrieval via AJAX calls

Credits

cookies handling functions by Peter-Paul Koch
next/previous methods bug fix by Aaron Mccall
Jason Johnston spotted bug in hasClass() method
Christian Bahls proposed location.hash parsing method

Like it or not? Leave your comments and suggestions here.