I did this for a client, but he says I can share it. When a tab is
shown, and it contains internal links, those links are rewritten to be
tab panel show actions. Also, as you hover over the link, the
corresponding tab is hover-colored. Quite cool.
// must be loaded *after* jquery-ui
(function($){
$.extend($.ui.tabs.prototype,{
_original_init: $.ui.tabs.prototype._init,
_init: function() {
var bindInternalLinks = function (event, ui) {
// alert('calling bindInternalLinks');
var $tabs = $(this); // our toplevel
var $data = $tabs.data('tabs'); // tabs object on that
var $anchors = $data.anchors; // jquery list of known
anchors
var $lis = $data.lis; // jquery list of corresponding tabs
var $panel = $(ui.panel); // jquery object on body
// look for anchors that might be to another tab
// if so, overlay them as 'select' triggers
$panel.find('a').each(function() {
var $a = $(this);
var $href = $a.attr('href');
var $index =
$anchors.index($anchors.filter('[href='+$href
+']'));
if ($index > -1) {
var $li = $lis.eq($index);
$a.click(
function ()
{$tabs.tabs('select',$index)}
);
// add hover-highlight as well
$a.hover(
function () {
$li.addClass('ui-state-hover');
},
function () {
$li.removeClass('ui-state-hover');
}
);
}; // end if
}); // end foreach a
}; // end bindInternalLinks
if(this.option('bindInternalLinks')){
this.element.bind('tabsshow', bindInternalLinks);
}; // end if
this._original_init();
}, // end _init
});
$.extend($.ui.tabs.defaults, {
bindInternalLinks:false
});
})(jQuery);
--
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en.
