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