Minimal Themeable jQuery Tabs Plugin - CardTabs
File Size: | 11.9 KB |
---|---|
Views Total: | 2729 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
CardTabs is an ultra-light, cross-browser jQuery tabs plugin that automatically creates tabs to switch between tabbed content on click.
How to use it:
1. Include the jQuery CardTabs plugin and other required resources on the webpage.
<link rel="stylesheet" href="jquery.cardtabs.css"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="jquery.cardtabs.js"></script>
2. Create the tabbed content and define the tab names in the data-tab
attribute:
<div class="demo"> <div data-tab="tab 1"> Tab 1 content </div> <div data-tab="tab 2"> Tab 2 content </div> <div data-tab="tab 3"> Tab 3 content </div> ... </div>
3. Call the main function cardTabs
on the top container and done.
$('.demo').cardTabs();
4. The plugin comes with 4 themes from which you can choose during init.
$('.demo').cardTabs({ // 'inset', 'graygreen' and 'wiki' 'theme': '' });
5. If you'd like to set the active tab on page load:
<div class="active" data-tab="tab 2"> Tab 2 content </div>
6. You're also allowed to create your own themes in the CSS as this:
/* Green gray slate */ div.card-tabs-bar.graygreen { border-bottom: 1px solid #e5e5e5; border-radius: 3px; } div.card-tabs-bar.graygreen a { padding: 15px; border-radius: 0px; margin: 0; padding-bottom: 10px; margin-bottom: -2px; font-size: 17px; } div.card-tabs-bar.graygreen a.active { background-color: #fafafa; border-top: 4px solid #2CC185; } div.card-tabs-stack.graygreen div[data-tab] { padding: 10px; background-color: #fafafa; border: 1px solid #e5e5e5; border-top: none; border-radius: 3px; }
Change log:
2018-03-29
- Bugfixed
This awesome jQuery plugin is developed by blekerfeld. For more Advanced Usages, please check the demo page or visit the official website.