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.

Here's an example tabs extension that adds a new notify() method. This method expects an index, so to notify the user about something that's happened in the first tab, you'd use the index 0.

$.widget( "app.tabs", $.ui.tabs, {
    
    notify: function( index ) {
        if ( this.active.index() === index ) {
            return;    
        }
        this.tabs.eq( index )
            .addClass( "ui-state-highlight" );
    },
    
    unnotify: function( index ) {
        this.tabs.eq( index )
            .removeClass( "ui-state-highlight" );    
    },
    
    _toggle: function( e, ui ) {
        this._super( e, ui );
        this.unnotify( ui.newTab.index() );
    }
    
});

There's actually two new methods provided by this tabs extension — notify() and unnotify(). The latter simply removes the ui-state-highlight class from the given tab index. It's also used by the _toggle() method this extension overrides. We call the default behaviour of _toggle(), then we make sure to remove the highlight class from the new tab. You'll notice as well, that it's safe to call notify() on the active index, since it's accounted for, and ignored.