jQuery Smart Tab

The flexible jQuery tab control plugin


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.

Build Status npm version Latest Stable Version GitHub license Donate on Paypal

Demo

Live Example

Tab 1 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 2 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Tab 4 Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

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

<!-- JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/jquery-smarttab@3.0.1/dist/js/jquery.smartTab.min.js" type="text/javascript"></script>
CDN - UNPKG
<!-- CSS -->
<link href="https://unpkg.com/jquery-smarttab@3.0.1/dist/css/smart_tab_all.min.css" rel="stylesheet" type="text/css" />

<!-- JavaScript -->
<script src="https://unpkg.com/jquery-smarttab@3.0.1/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();

});
That is it!

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

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

Parameter Description:

Parameter Description Default
selected (integer) Specify the selected tab on the first load 0
theme (string) Theme for the tab 'default'
orientation (string) Nav menu orientation 'horizontal'
justified (boolean) Nav menu justification true
autoAdjustHeight (boolean) Automatically adjust content height true
backButtonSupport (boolean) Enable the back button support true
enableURLhash (boolean) Enable selection of the tab based on url hash true
transition (object) with settings for the transition

animation (string) Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing 'none'
speed (number) Transion animation speed '400'
easing (string) Transition animation easing. Not supported without a jQuery easing plugin ''
autoProgress (object) with settings for the auto navigate tabs on interval

enabled (boolean) Enable/Disable Auto navigation false
interval (number) Auto navigate Interval (used only if "autoProgress" is enabled) 3500
stopOnFocus (boolean) Stop auto navigation on focus and resume on outfocus (used only if "autoProgress" is enabled) true
keyboardSettings (object) with settings for the keyboard navigation

keyNavigation (boolean) Enable/Disable keyboard navigation true
keyLeft (array) Left key code [37]
keyRight (array) Right key code [39]

Event Description

Event Description Parameters
leaveTab Triggers when leaving a tab.
This is a decision making event. based on its function return value (true/false) the current navigation can be cancelled.
Object: jQuery object of the tab anchor element.
Int: Index of the tab.
showTab Triggers after a tab is loaded with content. Object: jQuery object of the tab anchor element.
Int: Index of the tab.
tabContent Triggers when a tab is about to load.
This event will allow you to pass a string value as return parameter. The string value will be used as the content of the tab. You can also pass a Promise object and on Promise completion the result will be used as the content of the tab. This is usefull to load ajax contents and give you more control on the ajax calls.
Object: jQuery object of the tab anchor element.
Int: Index of the tab.

Event Initialize Examples

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

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

// Initialize Smart Tab
$('#smarttab').smartTab();

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.

jQuery Smart Tab v2
Dipu Raj

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.