techlab/jquery-smarttab

The flexible jQuery tab control plugin

v3.1.1 2020-06-14 15:17 UTC

README

The flexible jQuery tab control plugin

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

Smart Tab is a flexible and heavily customizable jQuery Tab control plugin.

If you think it is cool, you should also check it's sibling React Smart Tab

Demos

Screenshots

jQuery Smart Tab default

jQuery Smart Tab dark

jQuery Smart Tab tabs

jQuery Smart Tab brick

Requirements

  • jQuery (supports from jQuery-1.11.1+ to the latest jQuery-3.5.0)

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

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

CDN - UNPKG

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

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

Download

Download from GitHub

Features

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

Usage

Include jQuery SmartTab CSS

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

Include HTML

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

<script type="text/javascript">
  $(document).ready(function(){

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

  });
</script>

That's it!

Please see the documentation for more details on implementation and usage.

All options
// SmartTab initialize
$('#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 enabled)
        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
    }
});

License

MIT License

Contribute

If you like the project please support with your contribution.

Donate on Paypal

Thank you and Happy Coding!