CardTabs

CardTabs is yet another ultra-light jQuery plugin that allows for very simple tabs. The usage is explained below, click here for a demo. CardTabs is licensed under MIT.

Requirements

• jQuery 1.2 or higher

Simple usage

Make sure that jQuery is loaded. Get a hold of js/jquery.cardtabs.js and css/jquery.cardtabs.css by cloning the repo or downloading the latest release (v. 1.0) and add them to your page:

<link rel='stylesheet' href='assets_path/css/jquery.cardtabs.css'>
<script type='text/javascript' src='assets_path/js/jquery.cardtabs.js'></script>

HTML

The html is very simple. There is one container, with the actual tabs as divs, the data-tab attribute has to contain their name. The links on the top are automatically generated.

<div class='container'>
    <div data-tab="Tab one">
    	/* contents of the first tab...  */
    </div>
    <div data-tab="Tab two">
        /* contents of the second tab...  */
    </div>
    <div data-tab="Tab three">
        /* contents of the third tab...  */
    </div>
</div>

JavaScript

Use the following code to initialize the tabs.

<script type='text/javascript'>
$('.container').cardTabs();
</script>

Options

Manualy set the active tab

It is very simple to load another tab as the active tab. Just give that tab active as class:

<div class='active' data-tab='Active tab'></div>

Themes

Some themes are included in card tabs, to use them they have to be defined in the javascript, like this:

$('.container').cardTabs({'theme': 'inset'});

Creating themes

Themes are applied by a single css class (the theme name) on the generated elements. Making your own compatible theme is thus not that hard. You just need to style these elements: div.card-tabs-bar.yourthemename (the link bar), div.card-tabs-bar.yourthemename a (a link in the link bar), div.card-tabs-bar.yourthemename a.active (the active tab in the bar) and div.card-tabs-stack.yourthemename div[data-tab] (the shown tab itself).

div.card-tabs-bar.yourthemename{ /* the link bar */
    
}

div.card-tabs-bar.yourthemename a { /* A link in the link bar */

}

div.card-tabs-bar.yourthemename a.active  { /* The active tab link */ 

}

div.card-tabs-stack.yourthemename div[data-tab] { /* The shown tab itself */

}

Your theme can be loaded like this then:

$('.container').cardTabs({'theme': 'yourthemename'});