Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version Current

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
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 {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}

Tabs

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

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

Tabs

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

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 {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}

Tabs

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

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}