Using Jquery UI Tabs on Sidebar Widgets

I could really use a point in the right direction. I’ve started applying jquery ui in my sidebars, but am stuck on getting tabs to work. I’m looking to create tabs with each having a different widget in it. So for example: Tab 1= Login widget, Tab 2= Currently online widget, Tab 3= Recent posts widget.

I created a new sidebar, and feel like I am really close to a solution, but missing a small piece of the puzzle. The new sidebar is structured like this:

register_sidebar(array(
    'name' => 'Tabbed Widget Area',
    'id' => 'tabs-widgets',
    'description' => 'jQuery UI tab enabled widget area',
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<ul><a href="#">',
    'after_title' => '</a></ul>',
));

With this, jquery is styling the widgets, but isn’t tabbing them correctly. I am having trouble figuring out how to make the markup for the sidebar match the necessary markup for tabs, like this:

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
    <li><a href="#fragment-3"><span>Three</span></a></li>
  </ul>
  <div id="fragment-1">
    Content of one
  </div>
  <div id="fragment-2">
    Content of two
  </div>
  <div id="fragment-3">
    Content of three
  </div>
</div>

I know that ALL of the widget titles need to be wrapped in a ul, and then each one separately in a li. But I’m stuck on how to implement the ul correctly. Any advice or pointers would be extremely appreciated!