Documentation

UI/Tabs/Theming

From jQuery JavaScript Library

Jump to: navigation, search

The Tabs widget uses the jQuery UI CSS Framework API to style it's look and feel, including text style, icons and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. If a deeper level of customization is needed, there are widget-specific classes referenced within the tabs.css stylesheet that can be modified. These classes are highlighed in bold below.

Sample code with CSS classes

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

Learn more about theming