Output ‘do_settings_sections()’ as tabs, not one under the other

So because I couldn’t find an out of the box way, I created this. Don’t forget to enqueue the jquery-ui-tabs script –

/** Replace the call to 'do_settings_sections()' with a call to this function */
function do_settings_sections_tabs($page){

    global $wp_settings_sections, $wp_settings_fields;

    if(!isset($wp_settings_sections[$page])) :
        return;
    endif;

    echo '<div id="abb-tabs">';
    echo '<ul>';

    foreach((array)$wp_settings_sections[$page] as $section) :

        if(!isset($section['title']))
            continue;

        printf('<li><a href="#%1$s">%2$s</a></li>',
            $section['id'],     /** %1$s - The ID of the tab */
            $section['title']   /** %2$s - The Title of the section */
        );

    endforeach;

    echo '</ul>';

    foreach((array)$wp_settings_sections[$page] as $section) :

        printf('<div id="%1$s">',
            $section['id']      /** %1$s - The ID of the tab */
        );

        if(!isset($section['title']))
            continue;

        if($section['callback'])
            call_user_func($section['callback'], $section);

        if(!isset($wp_settings_fields) || !isset($wp_settings_fields[$page]) || !isset($wp_settings_fields[$page][$section['id']]))
            continue;

        echo '<table class="form-table">';
        do_settings_fields($page, $section['id']);
        echo '</table>';

        echo '</div>';

    endforeach;

    echo '</div>';

}

Here is the CSS for it. You could download and enqueue a style from the jQuery UI website if you wish, but none suited me, so I made this –

.ui-tabs ul.ui-tabs-nav{
    border-bottom: 2px solid #E2E2E2;
    line-height: 31px;
}
.ui-tabs ul.ui-tabs-nav li{
    border-top: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid transparent;
    border-bottom: none;
    display: inline;
    padding: 8px 20px;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active{
    background-color: #F1F1F1;
    border-top: 1px solid #E2E2E2;
    border-right: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    border-bottom: none;
}
.ui-tabs ul.ui-tabs-nav li a{
    color: #6BACD9;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
}
.ui-tabs ul.ui-tabs-nav li a:hover{
    color: #4A89BF;
}
.ui-tabs ul.ui-tabs-nav li.ui-state-active a{
    color: #222222;
    cursor: default;
}

And one simple jQuery function –

$(function(){
    $('#abb-tabs').tabs();
});