Can you have jQuery UI tabs in separate containing div's

I'd like to have my tab's link list in the top part of my site and have it change content i开发者_运维技巧n 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

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)

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/