jQuery Plugin For Extended Bootstrap Tabs - bootstrap-tabs-x

bootstrap-tabs-x is a lightweight jQuery plugin that extends the default Bootstrap 3/4 tabs component with custom opening/tab directions, border styles, tab content alignments, AJAX loading and much more.

How to use it:

1. Load the bootstrap-tabs-x plugin's JavaScript and CSS files into your web project which has jQuery and Bootstrap installed.

<link href="bootstrap.min.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="bootstrap-tabs-x.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tabs-x.js"></script>

2. Extend your existing Bootstrap tabs using the following CSS modifiers.

• tabs-above
• tabs-bottom
• tabs-right
• tabs-left
• tab-bordered
• tab-align-center
• tab-align-right
• tab-align-left
• tab-height-xs
• tab-height-sm
• tab-height-md
• tab-height-lg
• tab-sideways

<div class="tabs-x tabs-below">
  <div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="id01">
      <p>Content 1</p>
    </div>
    <div class="tab-pane fade" id="id02">
      <p>Content 1</p>
    </div>
    <div class="tab-pane fade" id="id03-1">
      <p>Content 3-1</p>
    </div>
    <div class="tab-pane fade" id="id03-2">
      <p>Content 3-2</p>
    </div>
  </div>
  <ul id="myTab" class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#id01" role="tab" data-toggle="tab">Tab 1</a></li>
    <li><a href="#id02" role="tab" data-toggle="tab">Tab 2</a></li>
    <li class="dropdown">
      <a href="#" id="myTabDrop-kv-2" class="dropdown-toggle" data-toggle="dropdown">
    Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop-1">
        <li><a href="#id03-1" tabindex="-1" role="tab" data-toggle="tab">Tab 3-1</a></li>
        <li><a href="#id03-2" tabindex="-1" role="tab" data-toggle="tab">Tab 3-2</a></li>
      </ul>
    </li>
  </ul>
</div>

3. Config the extended Bootstrap tabs via data-OPTION attribute on the tab container.

<div id="tabs-container" class="align-center" data-enableCache="true">
  <ul class="nav nav-tabs">
      ...
  </ul>
  <div class="tab-content">
      ...
  </div>
</div>

4. Or using JavaScript as this:

$("#tabs-container").tabsX({

  // enable caching of ajax
  enableCache: true,

  // timeout in milli-seconds after which cache will be refreshed
  cacheTimeout: 300000,

  // max length of title
  maxTitleLength: 9,

  // additional ajax options
  ajaxSettings: {},

  // callbacks
  successCallback: {},
  errorCallback: {},

  // additional CSS class
  addCss: 'tabs-krajee'
  
});

5. If you'd like to dynamically load external datasets via AJAX requests.

<div id="tabs-container" class="align-center">
  <ul class="nav nav-tabs">
    <li class="active"><a href="#pane-1" data-toggle="tab" data-url="loadTab.php?1">One</a></li>
    <li><a href="#pane-2" data-toggle="tab" data-url="loadTab.php?2">Two</a></li>
    <li><a href="#pane-3" data-toggle="tab" data-url="loadTab.php?3">Three</a></li>
  </ul>
</div>

6. Enable, flush and clear the tabs cache with the following methods.

$('#tabs-container').tabsX('initCache');
$('#tabs-container').tabsX('flushCache');

7. Events available.

$('[data-toggle="tab"]').on('tabsX:click', function (event) {
  console.log('tabsX:click event');
});

$('[data-toggle="tab"]').on('tabsX:click', function (event, jqXHR, status) {
    console.log('tabsX:click event');
});

$('[data-toggle="tab"]').on('tabsX:beforeSend', function (event, jqXHR, settings) {
    console.log('tabsX:beforeSend event');
});

$('.tabs-x').on('tabsX:beforeSend', function (event, data, status, jqXHR) {
    console.log('tabsX:beforeSend event');
});

$('.tabs-x').on('tabsX:error', function (event, jqXHR, status, message) {
    console.log('tabsX:error event with message = "' + message + '"');
});

Changelog:

v1.3.3 (01/12/2021)

• Enhancements to support Bootstrap v4.x framework.
• Enhance flushCache method to allow flushing cache of specific tabIds.
• Add initCache method.
• Correct code typo in README.
• Add github contribution and PR templates.
• Chronological ordering of issues for change log.
• Update copyright year to current.
• Code optimizations.
• Rename all events to begin with tabsX: instead of tabsX.
• Universal Module Definition for use with CommonJS, AMD or browser globals.
• Added flushCache method for modal scenario.

---

This awesome jQuery plugin is developed by kartik-v. For more Advanced Usages, please check the demo page or visit the official website.