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

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

  1. 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>
  2. 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.

  3. 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

Download

To Do

Credits

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

See also:

implemented by Grzegorz Wójcik
my e-mail address

© 2007-2014 kminek.pl