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>