jquery-smarttab

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

    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!

    Install

    npm i jquery-smarttab

    DownloadsWeekly Downloads

    435

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    173 kB

    Total Files

    34

    Last publish

    Collaborators

    • dipuraj