Notable Pseudocode Mashups

    jquery-smarttab

    4.0.2 • Public • Published

    jQuery Smart Tab v4

    The flexible jQuery tab control plugin

    Build Status npm version jsDelivr Hits Npm Downloadsl GitHub license GitHub Sponsor Donate on Paypal

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

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

    Demos

    Screenshots

    jQuery Smart Tab

    jQuery Smart Tab

    jQuery Smart Tab

    jQuery Smart Tab

    Requirements

    • jQuery (supports jQuery 1.11.1+ to jQuery 3.6+ and jQuery Slim versions)

    Installation

    NPM

    npm install jquery-smarttab
    

    Yarn

    yarn add jquery-smarttab
    

    CDN - jsDelivr

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

    CDN - UNPKG

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

    Common JS/Webpack

    var $ = require("jquery");
    require( "jquery-smarttab/dist/css/smart_tab_all.css");
    const smartTab = require("jquery-smarttab");
    
    $(function() {
        $('#smarttab').smartTab();
    });

    ES6/Babel

    import $ from "jquery";
    import "jquery-smarttab/dist/css/smart_tab_all.css";
    import smartTab from 'jquery-smarttab';
    
    $(function() {
        $('#smarttab').smartTab();
    });

    Note: you may have to install the required dependencies

    npm i jquery
    npm i jquery-smarttab
    
    // If you are using Webpack, install
    npm i webpack webpack-cli style-loader css-loader --save-dev

    Download

    Download from GitHub

    Features

    • Easy to implement and minimal HTML required
    • Supports all modern browsers
    • Responsive CSS design
    • Bootstrap compatible
    • Cool themes included and can be easly customize
    • Easy color cusomization using CSS variables
    • Built-in transition animations (none|fade|slideHorizontal|slideVertical|slideSwing|css)
    • Transition animations can be added easly by extending
    • CSS Animations support for transition animations (Supports Animate.css)
    • Accessible controls
    • External controls support
    • Easy ajax content integration
    • Keyboard navigation
    • Auto content height adjustment
    • Buit-in loader
    • Buit-in events
    • UMD (Universal Module Definition) support
    • Compatible with all jQuery versions (jQuery 1.11.1+, jQuery 3.6+, and jQuery Slim)
    • URL navigation and tab selection
    • Auto Progress (automatic navigation of tabs)

    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

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

    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: 'basic', // theme, related css need to include for other than default theme
        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 step based on url hash
        transition: {
            animation: 'none', // Animation effect on navigation, none|fade|slideHorizontal|slideVertical|slideSwing|css(Animation CSS class also need to specify)
            speed: '400', // Animation speed. Not used if animation is 'css'
            easing: '', // Animation easing. Not supported without a jQuery easing plugin. Not used if animation is 'css'
            prefixCss: '', // Only used if animation is 'css'. Animation CSS prefix
            fwdShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on forward direction
            fwdHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on forward direction
            bckShowCss: '', // Only used if animation is 'css'. Step show Animation CSS on backward direction
            bckHideCss: '', // Only used if animation is 'css'. Step hide Animation CSS on backward direction
        },
        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
        },
        keyboard: {
            keyNavigation: true, // Enable/Disable keyboard navigation(left and right keys are used if enabled)
            keyLeft: [37, 38], // Left key code
            keyRight: [39, 40], // Right key code
            keyHome: [36], // Home key code
            keyEnd: [35] // End key code
        },
        style: { // CSS Class settings
            mainCss: 'st',
            navCss: 'nav',
            navLinkCss: 'nav-link',
            contentCss: 'tab-content',
            contentPanelCss: 'tab-pane',
            themePrefixCss: 'st-theme-',
            justifiedCss: 'st-justified',
            anchorDefaultCss: 'default',
            anchorActiveCss: 'active',
            loaderCss: 'st-loading'
        },
        getContent: null
    });

    License

    MIT License

    Contribute

    If you like the project please support with your contribution.

    GitHub Sponsor
    Donate on Paypal

    Happy Coding ❤️

    Install

    npm i jquery-smarttab

    DownloadsWeekly Downloads

    339

    Version

    4.0.2

    License

    MIT

    Unpacked Size

    118 kB

    Total Files

    20

    Last publish

    Collaborators

    • dipuraj