Child pages
  • FSS Advanced Layout - Tabs

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Tabs

The "tabs" classes will convert an unordered list into a set of horizontal tabs. The implementor must create the content divs and programmatically show/hide the divs in response to use input, as well as programmatically move the fl-tabs-active class on the currently active tab. The examples on this page are not functional in that sense, and only show one content pane.

Centered Tabs

The mark-up and classes used to produce this layout:

<div class="fl-container-600 fl-centered">
    <ul class="fl-tabs">
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab #2</a></li>
        <li><a href="#_bottom">Tab #3</a></li>
    </ul>
    <div class="fl-tabs-content"> 
        Content
    </div>
</div>

Left-Aligned Tabs

The mark-up and classes used to produce this layout:

<div class="fl-container-600 fl-centered">
    <ul class="fl-tabs fl-tabs-left">
        <li><a href="#_bottom">Tab #1</a></li>
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
        <li><a href="#_bottom">Tab #3</a></li>
    </ul>
    <div class="fl-tabs-content"> 
        Content
    </div>
</div>

Right-Aligned Tabs

The mark-up and classes used to produce this layout:

<div class="fl-container-600 fl-centered">
    <ul class="fl-tabs fl-tabs-right">
        <li><a href="#_bottom">Tab #1</a></li>
        <li><a href="#_bottom">Tab #2</a></li>
        <li class="fl-tabs-active"><a href="#_bottom">Active Tab</a></li>
    </ul>
    <div class="fl-tabs-content"> 
        Content
    </div>
</div>
  • No labels