jQuery Smart Tab

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

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@3/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

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

CDN - UNPKG

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

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

Downloads

Download jQuery Smart Tab

Features

• Responsive design
• Standalone CSS
• Bootstrap compatible
• Various themes included
• Customizable CSS
• URL navigation and tab selection
• Event support
• Ajax content loading support
• Keyboard navigation
• Auto content height adjustment
• Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)
• Easy to implement and minimal HTML required
• Supports all modern browsers
• Auto Progress (automatic navigation of tabs)
• Cool transition animations (fade/slide-horizontal/slide-vertical/slide-swing)
• External anchor support

Documentation

Requirements

1. jQuery (supports jQuery 1.11.1+, jQuery 2+, jQuery 3.5+)

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

$(document).ready(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: 'default', // theme for the tab, related css need to include for other than default theme
  orientation: 'horizontal', // Nav menu orientation. horizontal/vertical
  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 tab based on url hash
  transition: {
      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
  },
  autoProgress: { // Auto navigate tabs on interval
      enabled: false, // Enable/Disable Auto navigation
      interval: 3500, // Auto navigate Interval (used only if "autoProgress" is set to true)
      stopOnFocus: true, // Stop auto navigation on focus and resume on outfocus
  },
  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
  }
});

Implement Ajax Contents

Ajax is not built-in, instead you can listen to tabContent event and provide the ajax contents. This is usefull to load ajax contents and give you full control on the ajax calls. The tabContent event can accept Promise as return or you can return the string as the content of the tab. The event will be passed with two parameters, anchorObject the jQuery object of the selected tab and tabIndex the zero based index number of the tabs. Here is an ajax call example with Promise.

// Ajax content loading with "tabContent" event
$("#smarttab").on("tabContent", function(e, anchorObject, tabIndex) {

    var repo    = anchorObject.data('repo');
    var ajaxURL = "https://api.npms.io/v2/package/" + repo;

    // Return a promise object
    return new Promise((resolve, reject) => {

      // Ajax call to fetch your content
      $.ajax({
          method  : "GET",
          url     : ajaxURL,
          beforeSend: function( xhr ) {
              // Show the loader
              $('#smarttab').smartTab("loader", "show");
          }
      }).done(function( res ) {

          var html = 'Ajax data about ' + repo + ' loaded from GitHub';
          html += 'URL:' + ajaxURL;
          html += 'Name: ' + res.collected.metadata.name;

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

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

        // Reject the Promise with error message to show as tab content
        reject( "An error loading the resource" );

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

    });

});


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

Public functions

There are public methods that are handy to do certain functions

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: 'dark'
};
$('#smarttab').smartTab("setOptions", options);

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

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

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");

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'.

orientation

(string) Nav menu orientation. Default value is 'horizontal'.

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/slide-horizontal/slide-vertical/slide-swing
• speed - (number) Transion animation speed
• easing - (string) Transition animation easing. Not supported without a jQuery easing plugin

$('#smarttab').smartTab({
  transition: {
      animation: 'none', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
      speed: '400', // Transion animation speed
      easing:'' // Transition animation easing. Not supported without a jQuery easing plugin
  }
});

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
  }
});

keyboardSettings

(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

$('#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
  }
});

Events

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.
• tabIndex (integer) Index of the tab.

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

showTab

The showTab event triggers when a tab is shown.

The event will receive the following parameters:

• anchorObject - (object) jQuery object of the anchor element.
• tabIndex (integer) Index of the tab.

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

tabContent

The tabContent event triggers when a tab content is about to load. This event will allow to pass a string value as return parameter to be used as the content of the tab. You can also pass a Promise object and on the Promise completion the result will be used as the content of the tab. This is usefull to load ajax contents and give more control on the ajax calls. Please see the ajax example.

The event will receive the following parameters:

• anchorObject - (object) jQuery object of the anchor element.
• tabIndex (integer) Index of the tab.

// Initialize the tabContent event
$("#smarttab").on("tabContent", function(e, anchorObject, tabIndex) {
  return "Here is the content for tab " + tabIndex;
});

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.