jQuery Plugins › jQuery Slider Plugins › jQuery SmartTab

Flexible jQuery Tabbed Interface Plugin - SmartTab

File Size: 293 KB
Views Total: 15059
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE8+, FireFox, Opera, Safari#Tabbed content#tabs
Flexible jQuery Tabbed Interface Plugin - SmartTab

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.