1

I'd like to have my tab's link list in the top part of my site and have it change content in the bottom. These would be in two separate div's. Is this possible? I can't find any documentation out there that says it can, only that they have to be in the same div. I don't want to have to resort to a bunch of absolute positioned elements. thx

Dirty Bird Design
  • 5,333
  • 13
  • 64
  • 121

2 Answers2

3

You can modify the JQuery-UI widget to decouple the tabs and the content panes with the following code:

$.widget( "ui.tabs", $.ui.tabs, {
    _getPanelForTab: function( tab ) {
        var id = $( tab ).attr( "aria-controls" );
        return $( this._sanitizeSelector( "#" + id ) );
    }
});

In the tabs.ui widget, the _getPanelForTab method starts its search for an element with the correct ID within the tab div. In this modified method, the whole page is searched for an element with the correct ID.

You could also create a new widget based on the ui.tabs widget if you didn't want to override its behavior on all of your pages. See: How to extend a jquery ui widget ? (1.7)

Community
  • 1
  • 1
jkirschner
  • 46
  • 2
1

You want to separate the tab itself from the content pane? This rather defeats the purpose of using a tab-style view; it sounds like you want something more like a nav menu.

That said, you could probably accomplish what you want using some custom CSS on the jQuery UI tabs.

Basic example: http://jsfiddle.net/mattball/eyQuM/

Matt Ball
  • 354,903
  • 100
  • 647
  • 710
  • yeah, thats where I'm heading. I tried using .load() to load the content, but I'm not able to append the URL with the #contentID like I can do with the tabs. Sucks. jQTools can do it easily, but they are kinda fragile now – Dirty Bird Design Feb 16 '11 at 17:10
  • @Dirty: just look at the source code to see how the jQuery UI tabs accomplishes that URL trick. – Matt Ball Feb 16 '11 at 17:15
  • I do it like this with the jQuery UI tabs when they are in the same div, but when I separate the two, the jQuery UI tabs doesn't work so this is moot. I need to add it to the .load funciton $(".tab-set").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4500, true); if($(".tab-set") && document.location.hash){ $.scrollTo(".tab-set"); } $(".tab-set ul").localScroll({ duration:300, hash:true }); $(".tab-set").hover(function() { $(".tab-set").tabs("rotate",0,true); }, function() { $(".tab-set").tabs("rotate",3500,true); } ); }); – Dirty Bird Design Feb 16 '11 at 17:26