Dynamic Ajax Tabs in 20 Lines
by Jesse Farmer on May 23, 2007

I've moved this post to its own project page. Please see the project page for additional updates.

The tabbed document interface is a common solution to the problem of presenting a user with multiple document in one window. Let's take as a given that you're interested in implementing this UI on your website. The usual way you do this in in javascript is to have all the document present, selectively showing one document as the user clicks on the tabs.

Using Ajax, however, the documents are actually external and get loaded only when the user clicks on the tab. The two methods are basically mirror images of each other. Static tabs increase the page load time for better interactive performance, while dynamic tabs make the opposite trade off. If your external documents are small or users frequently click on many tabs then static tabs might make more sense. If, however, your external documents are expensive to server or users rarely click on non-default tabs then dynamic tabs are probably better.

Demo

Here's a demo, which requires only 17 lines of code thanks to the Prototype Javascript framework.

  1. Pane 1
  2. Pane 2

Pane 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed nisl. Duis eros. Sed ornare mattis purus. Sed ut tellus eget ligula euismod interdum. Nullam aliquam sodales orci. Vestibulum sodales dui blandit purus. Morbi eleifend, risus et semper facilisis, nulla tortor dignissim arcu, ut aliquam odio ligula id diam. Donec ac ante id nisl faucibus ullamcorper. Vivamus tristique adipiscing est. Aliquam mollis lorem viverra ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam bibendum, ligula egestas fringilla viverra, diam orci rhoncus est, ut ultricies metus diam condimentum nunc. Quisque quam nibh, congue auctor, ultricies a, pharetra at, nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Usage

The above was created with the following HTML

<div class="tabbed-pane">
<ol class="tabs">
    <li><a href="#" class="active" id="pane1">Pane 1</a></li>
    <li><a href="#" id="pane2">Pane 2</a></li>
</ol>

</p>
<div id="MyPane_container" class="tabbed-container">
    <div id="MyPane_overlay" class="overlay" style="display: none"><h3>Loading…</h3></div>
    <div id="MyPane" class="pane">
    …DEFAULT CONTENT…
    </div>
</div>

and the following Javascript:

new TabbedPane('MyPane',
    {
        'pane1′: '/downloads/pane1.html',
        'pane2′: '/downloads/pane2.html'
    },
    {
        onClick: function(e) {
            $('MyPane_overlay').show();
        },
        onSuccess: function(e) {
            $('MyPane_overlay').hide();
        }
    });

TabbedPane takes as its input three parameters:

pane
The id of the element into which the content will be placed.
tabs
An object consisting of id/url pairs. When the element with the id is clicked TabbedPane loads the document at the url.
args
This corresponds to the Prototype Ajax options. In addition there is an onClick event which fires when one of the tabs is clicked.

Admittedly most of the hard work is left up to you. Specific behaviors about what to do when the content is loaded, e.g., displaying a "loading screen" or perhaps using an animation effect to resize the pane when it changes size are left to whomever uses the code.

Similarly, my example looks ugly, but the styling is all in CSS — you can take the time to make it suitable for your site. TabbedPane makes no assumptions about the layout of your page. It only requires that each tab and the pane have their own IDs.

Download TabbedPane.js

Viewing 34 Comments