jQuery UI – Part 2 Tabs

Posted by mdrisser on 2008/05/28 under Development, JavaScript, UI, Uncategorized, jQuery | 16 Comments to Read

Welcome back. I hope you enjoyed the tutorial on the jQuery UI Dialog widget. This time around we’re going to take a look at the Tabs widget.

If you’re not familiar with it, the jQuery UI Tabs widget will allow you take a page full of content and separate it out into, what appears to the user to be, tabbed pages. I’ll let you decide where this could be useful, but I see a lot of possibilities here.

The Tabs Widget actually started out as a jQuery Plugin that became very popular and ended up getting rolled into the UI (I suspect that’s how most of the widgets got into the UI), so if you’ve used the Tabs Plugin, the code should be quite familiar to you.

So let’s go ahead and get started, once again we’ll just be using a basic page, nothing fancy. Include the Flora theme, jQuery, the UI Core and the Tabs Widget:

If you’re not quite sure what’s going on here, go back and take a look at the UI-Dialog Tutorial.

Now that we have the basic page setup, we need to start to add in the code for our tabs. The tab headings, the parts of the tabs above the content, should be in a list, with the content of each tab as separate elements. We’ll be using and unordered list for the tabs themselves and divs for the tab contents.

Once we setup our list and divs we need to add just a little bit more to it. Each list item should be a link whose href attribute is equal to the ID of the Div containing the appropriate content. An example will help make things a bit clearer”

        
        
        
        






First tab is active by default:

                $('#example > ul').tabs();



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Looking at the code above you can see that the first list item’s link has an href of ‘#fragment-1′ and its content’s div has an ID of ‘fragment-1′. This is all basically acting like named anchors, except the anchor is a div.

If you load the page now you won’t be seeing the tabs you expect because we haven’t told jQuery about it yet. We do that by telling jquery to make out list into tabs:

        
        
        
        






First tab is active by default:

                $('#example > ul').tabs();



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Now if you load the page in a browser you should see something like this:

And you also just got a sneak peak of the new theme I’m working on :-)

As you can see, tabs are pretty easy to implement, just keep in mind that they act sort of like named anchors and you should be fine.

But that’s not all that you can do with Tabs, there are options to programmaticaly add, remove, enable, disable and select tabs. You can also auto-rotate them and even load Ajax content into them.

We can also add animation to the tabs, so that things are a bit more interesting when the user clicks on a tab. We do this by passing a couple of options to the tabs constructor:

        
        
        
        






First tab is active by default:

                $('#example > ul').tabs();



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Loading content via AJAX is just as easy, all you do is replace the href in the list item’s link with the URL of the page you want to load:

        
        
        
        






First tab is active by default:

                $('#example > ul').tabs();



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.



                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Here’s what the tab would look like:
Tab Loaded via AJAX

Pretty simple, I’ll let you play around with it on your own now, if you have any questions, let me know, I’ll do what I can to help.

  • Share/Bookmark

  • ramesh said,

    how do you create a vertical set of tabs?

    for e.g.

    tab1
    tab2
    tab3

  • Ulysses said,

    Hi mdrisser,

    I have created a ‘tabbed’ list. I have also created a button that is supposed to create a modal dialog box. What I would like to do is instead of creating a greybox modal dialog window, I want the dialog to appear as a temporary new tab in the tabbed list. Also when this new tab appears I want the rest of the tabs to be disabled. Once the user okays or cancels the dialog, the temporary new tab should be removed and the rest of the tabs should be enabled.

    The disable function takes only one tab index as its argument. Is there someway to specify ‘all’ instead of keeping track of the number of tabs and disabling one at a time?

  • mdrisser said,

    @ramesh – It should just be a simple matter of adjusting the CSS for the layout of the tabs.

    @Ulysses – You can also pass the disable function an array of tabs to disable. From the docs:

    The selected tab cannot be disabled. To disable more than one tab at once use: $(’#example’).data(’disabled.ui-tabs’, [1, 2, 3]);

  • Bash said,

    Should I be seeing ??

    Should there be some JavaScript there?

  • Bash said,

    Apologies,

    In the script tags for the javascript it just contains a html comment with mce:19 in.

    is that right an i am missing something or is it possibly a bug?

    thanks,

  • mdrisser said,

    @Bash: Thanks for letting me know about that, its fixed now.

  • jayg said,

    I am still seeing just mce:# in all the places where there should be javascript code (on FF3).

  • jDude said,

    The first 3 big chunks of code all look the same–only the 4th is different. There is nothing inside the ’script type’ line now.

  • Jeff said,

    There should be code inside the tags

  • Sid said,

    Hi,

    do you know if there’s jquery dialog supports ajax tab that only loads the tab content on first click rather than loading it again and again every time the ajax tab is activated?

  • Randy said,

    Thanks for the tutorial. Maybe you are interested in addressing something that confuses me!

    I want different colors for my tabs. First, I read the jQuery documentation on themes; sadly it didn’t click with me. Then I pored over ‘flora.css’ and all I learned was that those guys know css a lot better than me!

    Since you were kind enough to post a tutorial, do you have any further suggestions on setting the tab colors? Specifically, the portion of the markup (in your sample) that has the text ‘one’, ‘two’, ‘three’

  • mdrisser said,

    @jDude, @Jeff – I’ll see if I can fix it tonight, I changed themes, and the syntatx highlighter and I think that messed things up.

    @Sid Just off the top of my head, it seems to me that you can write some code that checks a variable when a user clicks a tab, if it is not set, or not set correctly, you can set it and fire off an AJAX call, if it is set, you can ignore the click:
    $(’#myTab’).click(function() {
    if(myVar != 1) {
    // AJAX code goes here
    myVar = 1;
    } else {
    return false;
    }
    });

    @Randy, my best suggestion is to get Firefox and the Firebug extension for it, this will enable you to dynamically explore the page and see where the values are being set at. In ddition it will allow you to change the CSS for that page, in the browser, so you can see the results immediately. Any changes you make through Firebug are not permanent, but its a great troubleshooting and design/development tool.

  • Danny said,

    I’m using these tabs in post, and I’m trying to control the amount of tabs that show up in each post, for example i created so there can be a maximum of four different tabs.
    in one post theres only content in 1 tab so i don’t really need to use tabs but in the next post theres content in 2 different tabs so i use those tabs and i want only these 2 to show in post and other 2 not show at all unless i add content in the 3rd or 4th tabs

  • mdrisser said,

    @Danny, I would check to see if the tabs contain anything by checking the value of html(). Then if its empty, use the disble function f the tabs UI to disable the empty tab(s).
    Something like:
    if($(’#myTab’).html == ”) {
    $(’#myTab’).disable();
    }

  • Karen said,

    @mdrisser

    I’m using jquery ui tabs v 1.7.2 on my site. I see that you have a code that checks the value of html() to automatically hide tabs. How does that work? my site is static and has 7 total tabs. I want to disable the tabs that don’t have content in them automatically. Where do I place the if statement? Do I need an else to the if? How will it know that a tab is empty? Finally, should the code be…

    if($(’#myTab’).html == “”)
    {
    $(’#myTab’).disable();
    }

    Thanks!

Add A Comment

home top