Minimal jQuery plugin for simple tabs
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
docs
js
.gitattributes
LICENSE
README.md

README.md

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'});