Flexible jQuery Tabbed Interface Plugin - SmartTab

File Size: | 176 KB |
---|---|
Views Total: | 12452 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
SmartTab is a powerful and highly customizable jQuery plugin for creating tabbed interface with cool animation effects.
It supports ajax contents, Keyboard Navigation and is compatible with all major browsers.
How to use it:
1. Include jQuery library and the SmartTab.js script on the web page.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/dist/js/jquery.smartTab.js"></script>
2. Include the needed stylesheet on the web page. All possible themes:
- Default
- Classic
- Brick
- Bootstrap Pills
- Bootstrap Tabs
- Dark
<!-- All in one --> <link href="/path/to/dist/css/smart_tab_all.min.css" rel="stylesheet" /> <!-- Default Theme --> <link href="/path/to/dist/css/smart_tab.min.css" rel="stylesheet" /> <!-- Brick Theme --> <link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" /> <!-- Bootstrap Pills Theme --> <link href="/path/to/dist/css/smart_tab_bspills.min.css" rel="stylesheet" /> <!-- Bootstrap Tabs Theme --> <link href="/path/to/dist/css/smart_tab_bstabs.min.css" rel="stylesheet" /> <!-- Bootstrap Tabs Theme --> <link href="/path/to/dist/css/smart_tab_dark.min.css" rel="stylesheet" />
3. The required markup structure for the tabbed interface.
<div id="smarttab"> <!-- Tabs --> <ul class="nav"> <li> <a class="nav-link" href="#tab-1"> Tab 1 </a> </li> <li> <a class="nav-link" href="#tab-2"> Tab 2 </a> </li> <li> <a class="nav-link" href="#tab-3"> Tab 3 </a> </li> </ul> <!-- Tabbed Content --> <div class="tab-content"> <div id="tab-1" class="tab-pane" role="tabpanel"> Tab content 1 </div> <div id="tab-2" class="tab-pane" role="tabpanel"> Tab content 2 </div> <div id="tab-3" class="tab-pane" role="tabpanel"> Tab content 3 </div> </div> </div>
4. Call the plugin on the ton container and done.
$('#smarttab').smartTab();
5. Customize the plugin with the following options.
$('#smarttab').smartTab({ // Selected Tab, 0 = first tab selected: 0, // Theme theme: 'default', // Or 'vertical' orientation: 'horizontal', // Justified layout for tabs justified: true, // Auto adjust content height autoAdjustHeight: true, // Supports for Back button backButtonSupport: true, // Enables URL hash enableURLhash: true, // Configs animations here transition: { // none, fade, slide-horizontal, slide-vertical, slide-swing animation: 'none', // transition speed speed: '400', // easing function easing: '' }, // Auto switches between tabs autoProgress: { // enable enabled: false, // interval in ms interval: 3500, // stop on focus stopOnFocus: true }, // Keyboard navigation keyboardSettings: { // enable keyNavigation: true, // keycodes keyLeft: [37], keyRight: [39] } });
6. Go to a specific tab.
$('#smarttab').smartTab("goToTab", tab_index);
7. Set/update options
$('#smarttab').smartTab("setOptions", options);
More Examples:
Changelog:
2020-06-15
- v3.1.1: a few optimizations
2020-05-09
- v3.0.1: init method optimized
2020-05-04
- v3.0 All new tab.
- Updated doc.
2015-02-02
- update.
This awesome jQuery plugin is developed by techlab. For more Advanced Usages, please check the demo page or visit the official website.