This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

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

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

NOTE: FSS is deprecated as of 1.5

All Advanced Layout Examples

Tabs

Menus

Widgets

Icons

Layout Fix


NOTE: FSS is deprecated as of 1.5
FSS Documentation

Fluid Skinning System - FSS
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our  IRC Channel.

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

Unknown macro: {html}

<div class="tabs-demos">
<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>
</div>

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

Unknown macro: {html}

<div class="tabs-demos">
<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>
</div>

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

Unknown macro: {html}

<div class="tabs-demos">
<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>
</div>

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