Tabs
Tabs are very practical UI tools because they offer the possibility to place more content on the same visual surface.
Like panels, tabs could be used for a structuring purpose, but they can have also a navigation function. The framework contains ten styles for tabs.
Tabs are composed of two objects: a dl object that contains the tabs, and a ul object with the tab content. These two objects are contained by a div tag.
The first four styles have the same structure and they support the dark and gradient additional classes.
From style-5 to style-9 there is a single skin available for each class. They are based on textured and gradient backgrounds.
From style-5 to style-9 there is a single skin available for each class. They are based on textured and gradient backgrounds.
The last tab style supports different color classes.
Color classes ONLY for style-10
<div class="tab style-10 [orange, green, blue, purple, aqua, magenta]">
<dl>
<dd><a href="#tab1" class="active">Tab 1</a></dd>
<dd><a href="#tab2">Tab 2</a></dd>
<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<ul>
<li class="active">Tab 1 content ...</li>
<li>Tab 2 content ...</li>
<li>Tab 3 content ...</li>
</ul>
</div>
<div class="tab style-10 [orange, green, blue, purple, aqua, magenta]">
<dl>
<dd><a href="#tab1" class="active">Tab 1</a></dd>
<dd><a href="#tab2">Tab 2</a></dd>
<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<ul>
<li class="active">Tab 1 content ...</li>
<li>Tab 2 content ...</li>
<li>Tab 3 content ...</li>
</ul>
</div>
Tab style-1
Include for tab style-1
// Common CSS file for the tabs
<link rel="stylesheet" href="css/tabs/JFTab.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/tabs/JFTabStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
<link rel="stylesheet" href="css/tabs/JFTab.css" />
// CSS file for style-1
<link rel="stylesheet" href="css/tabs/JFTabStyle-1.css" />
// For IE8
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/JFIE.css" />
<![endif]-->
// For IE9+
<!--[if gte IE 9]>
<link rel="stylesheet" href="css/JFIE9.css" />
<![endif]-->
Usage for tab style-1
<div class="tab style-1">
<dl>
<dd><a href="#tab1" class="active">Tab 1</a></dd>
<dd><a href="#tab2">Tab 2</a></dd>
<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<ul>
<li class="active">Tab 1 content ...</li>
<li>Tab 2 content ...</li>
<li>Tab 3 content ...</li>
</ul>
</div>
<dl>
<dd><a href="#tab1" class="active">Tab 1</a></dd>
<dd><a href="#tab2">Tab 2</a></dd>
<dd><a href="#tab3">Tab 3</a></dd>
</dl>
<ul>
<li class="active">Tab 1 content ...</li>
<li>Tab 2 content ...</li>
<li>Tab 3 content ...</li>
</ul>
</div>