Tabs
A jQuery plugin for simple tabs.
Demo
Demos are largely unstyled to give developers a better idea of how the plugin can drop into a new or existing project.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
Donec id elit non mi porta gravida at eget metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
<nav class="tabs_container">
	<a href="#tab-1" class="tabs" data-tabs-group="tab_group" data-tabs-active="true">One</a>
	<a href="#tab-2" class="tabs" data-tabs-group="tab_group">Two</a>
	<a href="#tab-3" class="tabs" data-tabs-group="tab_group">Three</a>
</nav>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
<div class="tab_content" id="tab-1">
	...
</div>
$(".tabs").tabs();
Using Tabs
Main
tabs.js
tabs.css
Dependencies
jQuery
core.js
mediaquery.js
swap.js
Basic
Tabs will automatically turn a set of links into a tabbed interface. The link's href
attribute should point to the desired content's fragment identifier, white the data-tabs-group
attribute should remain consistent between linked tabs:
$(".tab").tabs();
<div role="tablist">
<nav>
<a href="#tab-one" class="tab" data-tabs-group="tab-group">One</a>
<a href="#tab-two" class="tab" data-tabs-group="tab-group">Two</a>
<a href="#tab-three" class="tab" data-tabs-group="tab-group">Three</a>
</nav>
<div id="tab-one">
...
</div>
<div id="tab-two">
...
</div>
<div id="tab-three">
...
</div>
</div>
Accessibility
The role="tablist"
attribute should be set on a common parent of both the tabs and tab targets to ensure accessibility support.
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-tabs-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
customClass |
string |
'' |
Class applied to instance |
maxWidth |
string |
Infinity |
Width at which to auto-disable plugin |
mobileMaxWidth |
string |
'740px' |
Width at which to auto-disable mobile styles |
theme |
string |
"fs-light" |
Theme class name |
Events
Events are triggered on the target instance's element, unless otherwise stated.
Event | Description |
---|---|
update.tabs |
Tab activated |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
activate
Activates instance.
$(".target").tabs("activate");
defaults
Extends plugin default settings; effects instances created hereafter.
$.tabs("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").tabs("destroy");
disable
Disables instance.
$(".target").tabs("disable");
enable
Enables instance.
$(".target").tabs("enable");
CSS
Class | Type | Description |
---|---|---|
.fs-tabs-element |
element |
Target elmement |
.fs-tabs |
element |
Base widget class |
.fs-tabs.fs-tabs-enabled |
modifier |
Indicates enabled state |
.fs-tabs-tab |
element |
Tab handle element |
.fs-tabs-tab.fs-tabs-enabled |
modifier |
Indicates enabled state |
.fs-tabs-tab.fs-tabs-active |
modifier |
Indicates active state |
.fs-tabs-tab.fs-tabs-mobile |
modifier |
Indicates mobile interface |
.fs-tabs-content |
element |
Tab content element |
.fs-tabs-content.fs-tabs-enabled |
modifier |
Indicates enabled state |
.fs-tabs-content.fs-tabs-active |
modifier |
Indicates active state |
.fs-tabs-tab_mobile |
element |
Mobile tab handle element |
.fs-tabs-tab_mobile.fs-tabs-active |
modifier |
Indicates active state |