enhancement for tabs - allow self-linking from tab content

[Randal L. Schwartz]

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 jquery-ui@....
To unsubscribe from this group, send email to jquery-ui+unsubscribe@....
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.