jQuery UI Tabs: Non-standard markup structure

The jQuery UI Tabs plugin by default expects a markup structure like thi开发者_运维问答s:

<div id="tabs"> 
<ul> 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
    <li><a href="#tabs-2">Proin dolor</a></li> 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
</ul> 
<div id="tabs-1"> 
    <p>Content 1</p> 
</div> 
<div id="tabs-2"> 
    <p>Content 2</p> 
</div> 
<div id="tabs-3"> 
    <p>Content 3</p>
</div> 
</div> 

meaning that there is a top-level container ("tabs" in this case) with a ul inside it and several divs, allowing tab activation with a simple

$(function() {
    $( "#tabs" ).tabs();
});

However, this is unacceptable for me since I need a more complex structure. Namely, the ul is contained (along with other elements) inside another container div, and the panels are inside yet another one:

<div id="tabs"> 
<div id="container-1">
    <div id="inside"></div>
    <ul> 
        <li><a href="#tabs-1">Nunc tincidunt</a></li> 
        <li><a href="#tabs-2">Proin dolor</a></li> 
        <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
</div>
<div id="panels">
    <div id="tabs-1"> 
        <p>Content 1</p> 
    </div> 
    <div id="tabs-2"> 
        <p>Content 2</p> 
    </div> 
    <div id="tabs-3"> 
        <p>Content 3</p>
    </div> 
</div>
<div id="outside"></div>
</div> 

I now want the ul inside container-1 to provide the tabs for the divs inside panels. How is that possible?