jQuery UI: Notifying Users About Tabs

If you're using the jQuery UI tabs widget, it probably plays a major role in the layout of your UI. If it's the top-level navigation component, each tab panel probably has quite a few elements in it. Now, let's say the user is doing something in the third tab, but something important has happened in the first tab. You could just activate the first tab for them, but that's quite obnoxious. The better solution is give the user a subtle cue that something has happened in the first tab. The user then makes the decision for themselves, whether or not to drop what they're doing and activate the first tab.

jQuery UI: Disabled Tabs Are Better

If you're using the jQuery UI tabs widget, the beforeActivate event gives you the opportunity to "cancel" the activation of the tab. This works by having your handler function for this event return false. The widget knows that a false value returned by any of the beforeActivate handlers means that the whole show is off. In practice, however, this isn't necessarily the best way to go about handling tabs that shouldn't be activated.

jQuery UI: Pre-loading Remote Tab Content

The tabs widget can support remote content just as well as it does local div elements. All we have do is point the href attribute to some remote HTML that we want rendered when that tab is activated. The widget is smart enough to understand that we're referencing a URI, and not a local DOM ID. The content, for any given tab referencing remote content, is loaded when the tab is selected. Not before. However, this content is cached, so the second time the user selects a tab with remote content, it'll render instantly. There's a pre-loading trick you can use to give the perception of even faster loading time.

Full Screen Tabs Styles

When using the tabs widget as a top-level container — as in there's nothing else on the outside of the tabs — it's a "full-screen" widget. If you're using the tabs widget this way, you may want to strip away some of the style properties from the tab navigation. Especially if you have a background on your page - this way it gets through to the user better.

Add Tab To Specific Index

This example shows how jQuery UI developers can programatically add and remove tabs from the tabs widget. What if you need to add the new tab to a specific position, say, the first position, rather than just appending it to the list? Here's a modified version of the tabs manipulation demo that puts the newly-created tab in a specific position.

jQuery UI: Bouncing Tab Transitions

The tabs widget, from jQuery UI, lets the developer specify show and hide transitions independently from one another. That is, when the user transitions to another tab, by either clicking or interacting with the keyboard, the hide effect will be applied to the current tab panel. Next, the show effect is applied to the new panel. Note, we're talking about the panel here, not the clickable tab portion here — two distinct elements. However, it's possible to animate these as well when activated.

jQuery UI URL Tabs

The jQuery UI toolkit provides us with a tabs widget to logically group elements on our page.  This is useful as a top-level navigational tool for most web applications.  The default functionality of this widget allows us to divide content on a single page into tabs.  This is good if every page in your application has a different set of tabs, obviously not well suited for top-level navigation.

We can also configure the jQuery UI tabs widget to load the individual tab content in the background using Ajax requests.  Using this approach, we can reuse the same widget on several pages.  However, maybe we don't want to use asynchronous HTTP requests.  If your application doesn't use it anywhere else, why use it for the top-level navigation?

This also introduces another problem - if you're using the tabs widget as a top-level navigation tool, you probably want the links displayed to the user so they can visit these pages directly.  The tabs demo page actually has a work-around that lets the user follow the link set in the tab.  So it almost behaves like a link, but there is a problem with this approach in that it still appear to be a link to the end user.  For example, they can't right click it and copy link address.  It would be nice if we could use the tabs widget as a top-level navigation widget that uses standard links.  This way we can theme it and attach additional behavior to it if we're so inclined.

Below is an example of how I was able to get this working.  Here is the basic HTML markup.

<html>
    <head>
        
        <title>jQuery UI URL Tabs</title>
        
        <link type="text/css" href="jqueryuitheme.css" rel="stylesheet"/>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jqueryui.min.js"></script>
        <script type="text/javascript" src="urltabs.js"></script>
        
    </head>
    <body>
    
        <div id="tabs">
            <ul>
                <li><a href="/page1/">Page 1</a></li>
                <li><a href="/page2/#content">Page 2</a></li>
                <li><a href="/page3/">Page 3</a></li>
            </ul>            
            <div id="content">                 
                <p>Some content...</p>
            </div>
        </div>
                    
    </body>
</html>

And here is the urltabs.js file used to create the widget.

$(document).ready(function(){
    
    //Get the selected tab, and it's URL.
    var selection = $('#tabs ul li a[href$="#content"]');
    var selection_url = selection.attr('href')
                                 .replace('#content', '');
                                 
    //Replace the #content href.
    selection.attr('href', '#content');
    
    //Create the tabs widget, and select the proper tab.
    $('#tabs').tabs({
        selected: selection.parent().index(),
    });
    
    //Make each tab a link by setting the href attribute.
    $('#tabs ul li a').each(function(){
        var url = $.data(this, 'load.tabs');
        if(url) {
            $(this).attr('href', url);
        }
        else {
            $(this).attr('href', selection_url);
        }
    });
    
    //Make sure the selected tab also behaves like a link.
    $('#tabs ul li.ui-tabs-selected a').click(function(){
        location.href = $(this).attr('href');
        return false;
    }).css('cursor', 'pointer');

});

And there you have it - a tabs widget that will behave like plain old links.  Now for a few explanations.

The central idea to this approach is that the HTML markup uses a central #content div for displaying the selected tab content.  The selected tab link URL uses this anchor to say "I'm currently selected".  The markup is fairly simple and can easily be handled by any template system and server-side menu constructs.

The construction of the widget itself is done in five steps.  First, we need to locate the currently selected tab and store its URL.  We do this by finding the link with #content at the end.  Next, we replace the URL with #content.  This is required in order to display any content.  Next, we actually create the tabs widget using the specified tab selection.  At this point, we have a tabs widget, but it still wont use regular URL links because the widget will intercept the click events.

There are two things left to do once the widget has been created.  First, we find all tab links and set their URL back to what it was originally, before the widget was created.  However, the selected tab is different - we cannot retrieve the original URL from the widget and so this is why we stored it before the widget was created in selection_url.  Finally, we make the currently selected tab a link too.  Users will intuitively try to click it, so we may as well give them what they want.

jQueryUI Tab By ID

The jQueryUI tabs widget allows you to select a tab programmaticaly by using a 0-based index. This is handy because sometimes you want to direct a user to a tab without them having to click it. The select() method of the tabs widget allows us to do just that. However, having to keep track of the indexes for each tab doesn't really make sense and hard-coding the index value for a specific tab makes even less sense.

It would be nice if we could select a specific tab by ID. The following function does just that.

function select_tab_by_id(widget_id, tab_id){
   jQuery(widget_id)
   .tabs("select", jQuery(widget_id+" ul a")
   .index(jQuery("[href="+tab_id+"]")));
}

select_tab_by_id("#my_tabs", "#tools");