Dynamic tabbed interface with YUI

A week or two ago I decided that my sidebar was getting a little long, so I was trying to figure out a way to keep the same content, but compress things a bit. In the end, I decided to go with a tabbed interface for the list of local blogs I read and the category listing. You can see an example of what I came up with over in the sidebar near the bottom.

After doing some research, I decided to use YUI for the implementation. Why? Why not :-) Here’s what I came up with…

By the way, for those of you who want to jump directly to a working example, you can find it here. View the source and it should have everything you need to make it work. For those of you who’d like an explanation of what’s going on in the sample, read on.

The HTML

The first thing you’ll want to do is come up with the HTML you want in the different tabs. You can have as many or as few tabs as you’d like. Here’s a snippet of code from the example (it builds two tabs):

<div id="demo-tabs" class="yui-navset">
    <ul class="yui-nav">
        <li class="first selected"><h3><a href="#tab1">Tab #1</a></h3></li>
        <li><h3><a href="#tab2">Tab #2</a></h3></li>
    </ul>
    <div class="yui-content">
        <div id="tab1">
            <ul>
                <li><a href="#">Foo</a></li>
                <li><a href="#">Bar</a></li>
                <li><a href="#">Baz</a></li>
            </ul>
            <p>Don't you know about the bird?  Well, everybody knows that
            the bird is the word!</p>
        </div>
 
        <div id="tab2">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
            Fusce non sem tincidunt dui consequat ultrices. Quisque ipsum
            eros, varius at, porta nec, egestas et, justo. Proin ut odio
            ut neque dictum mollis. Fusce augue. Duis dictum semper risus.
            Phasellus vulputate malesuada turpis. In quis nunc eget nisi
            lacinia tempor.</p>
        </div>
    </div>
</div>

The javascript

Once you’ve got your HTML in place, you’ll need to add a few lines inside the <head></head> of the document. These include a stylesheet and the javascript needed to make the whole thing work. Add the following to your document:

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/tabview/assets/skins/sam/tabview.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/tabview/tabview-min.js"></script>

Now you’ll need to build a tab view. Since the id of the div in the example is demo-tabs, you’ll want to use that. Add the following code below the javascript you added above:

<script type="text/javascript">
    var myTabs = new YAHOO.widget.TabView("demo-tabs");
</script>

Styles

When it comes to styling the tabs, you’ve got a few choices. You can either use your own like I did in the example, or you can use the built-in styles from Yahoo!. To use the built-in styles, use a class of yui-skin-sam on the body:

<body class="yui-skin-sam">

Conclusion

That’s about it. Don’t forget to check the example to see how things work. Feel free to contact me if you have any questions.

For more information on YUI and TabView, see the Yahoo! Developer Network.

This entry was posted on Wednesday, October 29th, 2008 at 11:12 am and is filed under Code.

Both comments and pings are currently closed.

About the author

Jim Mock is a web developer living in Portland, Oregon with his wife, twin sons, 3 dogs, and 2 cats. He has been a Boston Red Sox fan for as long as he can remember, is addicted to video games and web standards, and thinks you should be, too.