FSS Advanced Layout - Tabs
All Advanced Layout Examples |
|---|
FSS Documentation
Still need help?
Join the infusion-users mailing list and ask your questions there.
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>