Flexible jQuery Tabbed Interface Plugin - SmartTab
File Size: | 293 KB |
---|---|
Views Total: | 15059 |
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, Bootstrap 5, third-party CSS animations libraries, 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
- Blocks
- Brick
- Elite
- Forge
- Pills
<!-- 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" /> <!-- Blocks Theme --> <link href="/path/to/dist/css/smart_tab_blocks.min.css" rel="stylesheet" /> <!-- Brick Theme --> <link href="/path/to/dist/css/smart_tab_brick.min.css" rel="stylesheet" /> <!-- Elite Theme --> <link href="/path/to/dist/css/smart_tab_elite.min.css" rel="stylesheet" /> <!-- Forge Theme --> <link href="/path/to/dist/css/smart_tab_forge.min.css" rel="stylesheet" /> <!-- Bootstrap Pills Theme --> <link href="/path/to/dist/css/smart_tab_pills.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 name theme: 'default', // 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: { // Animation effect on navigation // none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify) animation: 'none', // Animation speed. speed: '400', // Easing function. // Requires jQuery easing plugin easing: '', // Only used if animation is 'css' prefixCss: '', fwdShowCss: '', fwdHideCss: '', bckShowCss: '', bckHideCss: '', }, // 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, 38], keyRight: [39, 40], keyHome: [36], keyEnd: [35], }, // CSS Class settings style: { mainCss: 'st', navCss: 'nav', navLinkCss: 'nav-link', contentCss: 'tab-content', contentPanelCss: 'tab-pane', themePrefixCss: 'st-theme-', justifiedCss: 'st-justified', anchorDefaultCss: 'default', anchorActiveCss: 'active', loaderCss: 'st-loading' }, // Callback function for content loading getContent: null, });
6. Override the default CSS variables to create your own styles.
:root { --st-background: unset, --st-border: 1px solid #eeeeee, --st-anchor-default-primary-color: #f8f9fa; --st-anchor-default-secondary-color: #b0b0b1; --st-anchor-active-primary-color: #009EF7; --st-anchor-active-secondary-color: #ffffff; --st-anchor-disabled-primary-color: #f8f9fa; --st-anchor-disabled-secondary-color: #dbe0e5; --st-loader-color: #009EF7; --st-loader-background-color: #f8f9fa; --st-loader-background-wrapper-color: rgba(255, 255, 255, 0.7); }
7. API methods.
// goto the next tab $('#smarttab').smartTab("next"); // back to the previous tab $('#smarttab').smartTab("prev"); // goto the first tab $('#smarttab').smartTab("first"); // goto the last tab $('#smarttab').smartTab("last"); // reset tabs $('#smarttab').smartTab("reset"); // goto a specific tab $('#smarttab').smartTab("goToTab", 3); // update options $('#smarttab').smartTab("setOptions", options); // get options $('#smarttab').smartTab("getOptions"); // get the tab info $('#smarttab').smartTab("getInfo"); // show/hide the loading animation $('#smarttab').smartTab("loader", "show"); $('#smarttab').smartTab("loader", "hide"); // adjust the content height of the current step $('#smarttab').smartTab("fixHeight");
More Examples:
Changelog:
v4.0.2 (2022-07-31)
- Fixed: Fast navigation result in improper page selection
- Changed: Code improvements
v4.0.1 (2022-07-11)
- Added: Support for jQuery Slim version
- Added: Public function fixHeight.
- Added: Public function getInfo to get tab index and tota tabs.
- Added: goToTab function with force parameter.
- Added: New themes
- Added: Colors are changable dynamically using CSS variables.
- Added: Bootstrap 5 support
- Added: initialized event .
- Added: Move CSS class names to options
- Added: Transition animations can be extended
- Added: CSS Animations support on transition animations. Supports Animate.css
- Changed: JavaScript and CSS code is rewritten
- Changed: Imporoved all CSS themes
- Changed: Made most of the options can changed with setOptions function
- Changed: Rewritten option names and properties with minimal and meaningful names
- Changed: Improved transition animations
- Removed: Dark mode is removed. Added CSS variable support to change any colors.
- Removed: Removed orientation option, instead add st-vertical CSS class to the main element
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.