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.

<!-- Bootstrap Framework -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

<!-- For Bootstrap 5 & 4 -->
<link href="css/bootstrap-tabs-x-bs4.min.css" rel="stylesheet" />
<!-- For Bootstrap 3 -->
<link href="css/bootstrap-tabs-x.css" rel="stylesheet" />
<!-- Main JavaScript -->
<script src="js/bootstrap-tabs-x.min.js" type="text/javascript"></script>

2. The required markup. Available 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

<!-- BOOTSTRAP 5 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
  <!-- tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item">
          <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
      </li>
      <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
              Dropdown
          </a>
          <div class="dropdown-menu">
              <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-bs-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
              <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-bs-toggle="tab" aria-controls="dropdown2">Dropdown 2</a>
          </div>
      </li>
  </ul>
  <!-- tab panes -->
  <div class="tab-content" id="myTabContent">
      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
      <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
      <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
  </div>
</div>

<!-- BOOTSTRAP 4 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
  <!-- tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-expanded="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" id="dropdown1-tab" href="#dropdown1" role="tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a>
        <a class="dropdown-item" id="dropdown2-tab" href="#dropdown2" role="tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 2</a>
      </div>
    </li>
  </ul>
  <!-- tab panes -->
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
    <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
    <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
  </div>
</div>

<!-- BOOTSTRAP 3 MARKUP -->
<legend>Tabs Above Centered (Bordered)</legend>
<div class="tabs-x align-center tabs-above tab-bordered">
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation" class="dropdown">
      <a href="#" class="dropdown-toggle" id="myTabDrop1" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
        Dropdown <span class="caret"></span>
      </a>
      <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
        <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">Dropdown 1</a></li>
        <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">Dropdown 1</a></li>
      </ul>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="home">...</div>
    <div role="tabpanel" class="tab-pane" id="profile">...</div>
    <div role="tabpanel" class="tab-pane" id="settings">...</div>
    <div class="tab-pane fade" id="dropdown1" role="tabpanel" aria-labelledby="dropdown1-tab">...</div>
    <div class="tab-pane fade" id="dropdown2" role="tabpanel" aria-labelledby="dropdown2-tab">...</div>
  </div>
</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 initialize the plugin sing JavaScript as follows:

$("#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.4 (09/16/2021)

• Enhancements to support Bootstrap v5.x framework.

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.