Apply effect on an unselected tab anchor - jquery-ui

Question

Is there a way to apply a jQuery UI effect, such as the pulsate effect (as described here) on an unselected tab of a tab strip, leaving that tab unselected?
What I'm trying to obtain is to tell the user to pay attention on a tab X while he's working on a tab Y, because some action caused the tab X to reload its contents.

Answer 1

You can create a customized tabs widget with the notification behavior built into it:
$.widget( "app.tabs", $.ui.tabs, {
// Applies the "ui-state-highlight" class
// to the given tab index.
notify: function( index ) {
if ( this.active.index() === index ) {
return;
}
this.tabs.eq( index )
.addClass( "ui-state-highlight" );
},
// Removes the "ui-state-highlight" class
// from the given tab index.
unnotify: function( index ) {
this.tabs.eq( index )
.removeClass( "ui-state-highlight" );
},
// Make sure active tabs don't have the
// "ui-state-highlight" class applied.
_toggle: function( e, ui ) {
this._super( e, ui );
this.unnotify( ui.newTab.index() );
}
});
$(function() {
$( "#tabs" ).tabs()
.tabs( "notify", 1 );
});
You're basically just adding two new methods to the widget - notify() and unnotify(). The _toggle() method we've overridden here just makes sure that when we navigate to the tab that's been notified, we turn off the notification by calling unnotify().
This code is just adding the ui-state-highlight class as the notification mechanism, but that can easily be replaced with something else, like an effect. Here's the original fiddle.