Fullscreen Tabs Widget

Styles to better suit a jQuery Ui tabs widget when occupying the full screen.

HTML

<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>

CSS

body {
    font-size: 0.8em;
}

/*
 * Removes the border from the tabs widget.
 *
 */
.ui-tabs-fullscreen {
    border: none;
}

/*
 * Removes the background, the left, top, and right borders
 * from the tabs navigation ul.
 *
 */
.ui-tabs-fullscreen .ui-tabs-nav {
    background: none;
    border-left: none;
    border-top: none;
    border-right: none;
}

JavaScript

$( "#tabs" ).tabs({

    // Called when the tabs are first created. Here the custom
    // "ui-tabs-fullscreen" class is added while the "ui-corner-all"
    // class is removed from the tabs navigation.
    create: function( e, ui ) {
        $( this ).addClass( "ui-tabs-fullscreen" )
                 .find( ".ui-tabs-nav" ).removeClass( "ui-corner-all" );
    }
    
});