Miss any of our Open RFC calls?Watch the recordings here! »

jquery-smarttab

3.0.1 • Public • Published

jQuery Smart Tab v3

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.

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

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!

Install

npm i jquery-smarttab

DownloadsWeekly Downloads

6

Version

3.0.1

License

MIT

Unpacked Size

134 kB

Total Files

26

Last publish

Collaborators

  • avatar