Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Include Page
docs:Styles for FSS examplesdocs:
Styles for FSS examples
Section
Column
Include Page
docs:FSS advanced layout examples navigationdocs:
FSS advanced layout examples navigation
Include Page
docs:FSS Links Paneldocs:
FSS Links Panel
h2. Tabs The

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.

h3.

Centered

Tabs

Tabs

Column
Wiki Markup
Wiki Markup
{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>
{html}

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

{code:html}
 Code Block
html
html
<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>
{code}

h3. 
Left-Aligned 
 Tabs

Tabs
 Wiki Markup
{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>
{html}



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

{code:html}
 Code Block
html
html
<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>
{code}

h3. 
Right-Aligned 
 Tabs

Tabs
 Wiki Markup
{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>
{html}



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

{code:html}
 Code Block
html
html
<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>
{code}