jQuery Smart Tab v4

jQuery Smart Tab is a jQuery plugin for easy implementation of tab interface. Flexible and easy to implement with a lot of features that you will love like Ajax contents, verity of themes, cool animation effects, event support, easy to customize.

Demo

Live Example

More Examples

• Basic Example
• Ajax Example
• Multiple Tab
• Vertical Tab Layout
• Bootstrap Modal Example

Installation

NPM

npm install jquery-smarttab

Yarn

yarn add jquery-smarttab

Composer

composer require techlab/jquery-smarttab

CDN - jsDelivr

<!-- CSS -->
<link href="https://cdn.jsdelivr.net/npm/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

CDN - UNPKG

<!-- CSS -->
<link href="https://unpkg.com/jquery-smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/jquery-smarttab@4/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>

Common JS/Webpack

var $ = require( "jquery" );
require( "jquery-smarttab/dist/css/smart_tab_all.css");
const smartTab = require("jquery-smarttab");

$(function() {
    $('#smarttab').smartTab();
});

ES6/Babel

import $ from "jquery";
import "jquery-smarttab/dist/css/smart_tab_all.css";
import smartTab from 'jquery-smarttab';

$(function() {
    $('#smarttab').smartTab();
});

npm i jquery
npm i jquery-smarttab

// If you are using Webpack, install
npm i webpack webpack-cli style-loader css-loader --save-dev

Downloads

Download jQuery Smart Tab

Features

• Easy to implement and minimal HTML required
• Supports all modern browsers
• Responsive CSS design
• Bootstrap compatible
• Cool themes included and can be easly customize
• Easy color cusomization using CSS variables
• Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
• Transition animations can be added easly by extending
• CSS Animations support for transition animations (Supports [Animate.css](https://animate.style/))
• Accessible controls
• External controls support
• Easy ajax content integration
• Keyboard navigation
• Auto content height adjustment
• Buit-in loader
• Buit-in events
• UMD (Universal Module Definition) support
• Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)
• URL navigation and tab selection
• Auto Progress (automatic navigation of tabs)
• URL navigation and tab selection
• Auto Progress (automatic navigation of tabs)

Documentation

Requirements

1. jQuery

Include jQuery SmartTab CSS

<link href="../dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css">

The HTML Markup

<div id="smarttab">
    <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>
       <li>
           <a class="nav-link" href="#tab-4">
              Tab 4
           </a>
       </li>
    </ul>

    <div class="tab-content">
       <div id="tab-1" class="tab-pane" role="tabpanel">
          Tab content
       </div>
       <div id="tab-2" class="tab-pane" role="tabpanel">
          Tab content
       </div>
       <div id="tab-3" class="tab-pane" role="tabpanel">
          Tab content
       </div>
       <div id="tab-4" class="tab-pane" role="tabpanel">
          Tab content
       </div>
    </div>
</div>

Include jQuery (ignore this if you have already included on the page)

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

Include jQuery SmartTab JavaScript

<script type="text/javascript" src="../dist/js/jquery.smartTab.min.js"></script>

Initialize the jQuery SmartTab

$(function() {
    // SmartTab initialize
    $('#smarttab').smartTab();
});

CSS Files Selection

You can see many CSS files at dist/css/ folder and may be confused about which one to use. The answer is you can use any of them, all the CSS files are standalone.

The only difference in the files is the theme. The file ../dist/css/smart_tab_all.css contains all the themes, while the ../dist/css/smart_tab.css only contains the default theme. Also other files are theme-specific file named with the respective theme names, like ../dist/css/smart_tab_(theme name).css.

All these files have corresponding min files that compressed for size reduction, those files are recommended unless you don't want to customize the CSS yourself. Ex. ../dist/css/smart_tab_all.min.css

Advanced Options

Optional parameters

$('#smarttab').smartTab({
  selected: 0, // Initial selected tab, 0 = first tab
  theme: 'basic', // theme, related css need to include for other than default theme
  justified: true, // Nav menu justification. true/false
  autoAdjustHeight: true, // Automatically adjust content height
  backButtonSupport: true, // Enable the back button support
  enableUrlHash: true, // Enable selection of the step based on url hash
  transition: {
      animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
      speed: '400', // Animation speed. Not used if animation is 'css'
      easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
      prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
      fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
      fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
      bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
      bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
  },
  autoProgress: { // Auto navigate tabs on interval
      enabled: false, // Enable/Disable Auto navigation
      interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
      stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
  },
  keyboard: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37, 38], // Left key code
      keyRight: [39, 40], // Right key code
      keyHome: [36], // Home key code
      keyEnd: [35] // End key code
  },
  style: { // CSS Class settings
      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'
  },
  getContent: null
});

Ajax content implementation

External ajax based contents are supported using getContent callback function which is called before showing each step. The getContent callback function will receive 5 parameters which are:

• stepIndex - (integer) zero based index number of the steps
• stepDirection - (string) step direction (forward/backward)
• stepPosition - (string) step position (first/last/middle)
• selStep - (object) jQuery object of the anchor element to show
• callback - (function) the callback function which accepts HTML content as string

// Function to fetch the ajax content
function provideContent(idx, stepDirection, stepPosition, selStep, callback) {
  // You can use stepDirection to get ajax content on the forward movement and stepPosition to identify the step position
  let ajaxURL = "YOUR AJAX URL";

  // Ajax call to fetch your content
  $.ajax({
      method  : "GET",
      url     : ajaxURL,
      beforeSend: function( xhr ) {
          // Show the loader
          $('#smarttab').smartTab("loader", "show");
      }
  }).done(function( res ) {
      // Build the content HTML
      let html = `<div class="card w-100" >
                      <div class="card-body">
                          <p class="card-text">${res}</p>
                      </div>
                  </div>`;

      // Resolve the Promise with the tab content
      callback(html);

      // Hide the loader
      $('#smarttab').smartTab("loader", "hide");
  }).fail(function(err) {
      // Handle ajax error

      // Hide the loader
      $('#smarttab').smartTab("loader", "hide");
  });

  // The callback must called in any case to procced the steps
  // The empty callback will not apply any dynamic contents to the steps
  callback();
}


// SmartTab initialize with step content callback
$('#smarttab').smartTab({
  getContent: provideContent
});

Set colors using CSS variables

The colors on the jQuery Smart Tab is cusomizable using CSS variables. You can overwrite the css variables by applying your own colors. Add the CSS colors on root element after including the jQuery Smart Wizard CSS.

<link href="https://cdn.jsdelivr.net/npm/smarttab@4/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<style>
  :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);
  }
<style/>

Extend transition animations

Moreover built-in animations jQuery Smart Tab supports extending the transition animations with your own. Just add your function to $.fn.smartTab.transitions variable. The paramters receives on the functions are:

• elmToShow - (object) tabContentObject of the element to show
• elmToHide - (object) tabContentObject of the element to hide
• tabDirection - (string) The direction of the navigation
• mainObj - (object) Object of the main element
• callback - (function) The callback function to call when the animation is finished. Pass false if an error on processing the animation, the wizard will take the default options to continue.

// Smart Tab initialize using custom transition animation
$('#smarttab').smartTab({
    transition: {
      animation:'myAnimation'
    }}
});

// Add your custom animation function
$.fn.smartTab.transitions.myAnimation = (elmToShow, elmToHide, tabDirection, mainObj, callback) => {
  if (!$.isFunction(elmToShow.fadeOut)) { callback(false); return; }

  if (elmToHide) {
      elmToHide.fadeOut(mainObj.options.transition.speed, mainObj.options.transition.easing, () => {
          elmToShow.fadeIn(mainObj.options.transition.speed, mainObj.options.transition.easing, () => {
              callback();
          });
      });
  } else {
      elmToShow.fadeIn(mainObj.options.transition.speed, mainObj.options.transition.easing, () => {
          callback();
      });
  }
}

Public functions

There are public methods that are handy to do certain functions

next

Navigates to next step

// Navigate next
$('#smarttab').smartTab("next");

prev

Navigates to previous step

// Navigate previous
$('#smarttab').smartTab("prev");

first

Navigates to first step

// Navigate first
$('#smarttab').smartTab("first");

last

Navigates to last step

// Navigate last
$('#smarttab').smartTab("last");

reset

Reset to initial state

// Reset
$('#smarttab').smartTab("reset");

goToTab

Allow you to go to a certain tab.

// Go to tab
$('#smarttab').smartTab("goToTab", 3);

setOptions

Allow you to set the options dynamically.

// Change theme
var options = {
  theme: 'pills'
};
$('#smarttab').smartTab("setOptions", options);

// Change Orientation and Justify
var options = {
  theme: 'basic',
  justified: false
};
$('#smarttab').smartTab("setOptions", options);

// Change animation
var options = {
  transition: {
      animation: 'fade'
  },
};
$('#smarttab').smartTab("setOptions", options);

getOptions

Gets the options

  let options = $('#smarttab').smartTab("getOptions");
  console.log(options);

getInfo

Gets the jQuery SmartTab info. Ex: { currentTab: 1, totalTabs: 4 }

  let info = $('#smarttab').smartTab("getInfo");
  console.log(info);

loader

Allow you to show/hide the built-n loader animation.

// Show the loader
$('#smarttab').smartTab("loader", "show");

// Hide the loader
$('#smarttab').smartTab("loader", "hide");

fixHeight

Adjust the content height of the current step.

// Fix the content height of the current tab
$('#smarttab').smartTab("fixHeight");

Parameters

selected

(integer) Specify the selected tab on the first load. Default value is 0.

theme

(string) Theme for the tab. Default value is 'default'.

justified

(boolean) Nav menu justification. Default value is true.

autoAdjustHeight

(boolean) Automatically adjust content height. Default value is true.

backButtonSupport

(boolean) Enable the back button support. Default value is true.

enableURLhash

(boolean) Enable selection of the tab based on url hash. Default value is true.

transition

(object) Settings for the transition with the following options:

• animation - (string) Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
• speed - (number) Animation speed. Not used if animation is 'css'
• easing - (string) Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
• prefixCss - (string) Only used if animation is 'css'. Animation CSS prefix
• fwdShowCss - (string) Only used if animation is 'css'. Step show Animation CSS on forward direction
• fwdHideCss - (string) Only used if animation is 'css'. Step hide Animation CSS on forward direction
• bckShowCss - (string) Only used if animation is 'css'. Step show Animation CSS on backward direction
• bckHideCss - (string) Only used if animation is 'css'. Step hide Animation CSS on backward direction

// Using an built-in transition animation
$('#smarttab').smartTab({
  transition: {
      animation: 'slideHorizontal', // Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
  }
});

// Using an css transition animation. You need to include Animate.css 
$('#smarttab').smartTab({
  transition: {
      animation: 'css', // Effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
      prefixCss: 'animate__animated animate__faster',
      fwdShowCss: 'animate__bounceIn',
      fwdHideCss: 'animate__bounceOut',
      bckShowCss: 'animate__bounceIn',
      bckHideCss: 'animate__bounceOut'
  }
});

autoProgress

(object) Settings for the auto navigate tabs on interval with the following options:

• enabled - (boolean) Enable/Disable Auto navigation
• interval - (number) Auto navigate Interval (used only if "autoProgress" is enabled)
• stopOnFocus - (boolean) Stop auto navigation on focus and resume on outfocus (used only if "autoProgress" is enabled)

$('#smarttab').smartTab({
  autoProgress: { // Auto navigate tabs on interval
      enabled: false, // Enable/Disable Auto navigation
      interval: 3500, // Auto navigate Interval (used only if "autoProgress" is enabled)
      stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
  }
});

keyboard

(object) Settings for the keyboard with the following options:

• keyNavigation - (boolean) Enable/Disable keyboard navigation
• keyLeft - (array) Left key code
• keyRight - (array) Right key code
• keyHome - (array) Home key code
• keyEnd - (array) End key code

$('#smarttab').smartTab({
  keyboardSettings: {
      keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
      keyLeft: [37], // Left key code
      keyRight: [39] // Right key code
  }
});

getContent

(function) Callback function to provide tab content. Please see the example here. Default value is null.

function provideContent(idx, tabDirection, tabPosition, selTab, callback) {
  callback();
}

$('#smarttab').smartTab({
  getContent: provideContent
});

Events

initialized

The initialized event triggers when the jQuery Smart Tab initialized.

// Initialize event
$("#smarttab").on("initialized", function(e) {
  console.log("initialized");
});

loaded

The loaded event triggers when the jQuery Smart Tab is fully loaded.

// loaded event
$("#smarttab").on("loaded", function(e) {
  console.log("loaded");
});

leaveTab

The leaveTab event triggers just before leaving from a tab. You can cancel the event by returning false, so the navigation is also be cancelled and the tab will retain the current state.

The event will receive the following parameters:

• anchorObject - (object) jQuery object of the anchor element.
• currentIndex - (integer) Index of the current tab.
• nextIndex - (integer) Index of the next tab.
• tabDirection - (string) Tab direction.

// Initialize the leaveTab event
$("#smarttab").on("leaveTab", function(e, anchorObject, currentIndex, nextIndex, tabDirection) {
   return confirm("Do you want to leave the tab " + currentIndex + "?");
});

showTab

The showTab event triggers when a step is shown.

The event will receive the following parameters:

• anchorObject - (object) jQuery object of the anchor element.
• tabIndex (integer) Index of the tab.
• tabDirection - (string) Tab direction.
• tabPosition - (string) Tab position.

// Initialize the showTab event
$("#smarttab").on("showTab", function(e, anchorObject, tabIndex, tabDirection, tabPosition) {
   alert("You are on tab " + tabIndex + " now");
});

License

Released under the terms of the MIT License (more). You are free to use on both personal and commercial environment as long as the copyright header is left intact.

A little help is always a beautiful thing...

We are committed to deliver free and open source projects. Your support keep us on the track and make us deliver bigger things for you.

Help us improve

jQuery Smart Tab is a free and open-source project, and we are trying hard to improve the project as per the feedback from you. Please help us finding bugs or issues on this project, or give us an idea for a feature. Also, you are most welcome to improve the code, please create a pull-request on the project repository on GitHub.

Archive

Please see the older versions archive of this plugin.

Dipu Raj

Full-stack developer in JavaScript, PHP and C# with added interest in Angular, React, jQuery and Bootstrap. Believes the code should be as beautiful as the design.