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.

Note: Please let me know if you have any issues with viewing the syntax highlighting above. I’m trying out the WP-Syntax plugin.

This entry was posted on Wednesday, October 29th, 2008 at 11:12 am and is filed under Code. You can follow any responses to this post through the RSS feed.

You can leave a response, or trackback from your own site.

4 Responses to Dynamic tabbed interface with YUI

Comments:

A couple of notices.

This css link should be in the head:

But the javascript all the way down in the body:

var myTabs = new YAHOO.widget.TabView(”demo-tabs”);

Furthermore you could use combine javascript See(http://developer.yahoo.com/yui/articles/hosting/):

var myTabs = new YAHOO.widget.TabView(”demo-tabs”);

This way your javascript is more optimized. See yslow(http://developer.yahoo.com/yslow/help/) for more info.

Alfred Westerveld on October 30, 2008 at 9:39 am

If you look at the source from the example, you’ll see the javascript and CSS are in the head. The code I posted isn’t the full code of the example.

Also, thanks for the links, I’ll check them out.

jim on October 30, 2008 at 9:44 am

Trackbacks:

You must be logged in to post a comment.

soupnazi.org