jQuery Plugins › jQuery Other Plugins › bootstrap-tabs-x

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

File Size:	39.5 KB
Views Total:	6230
Last Update:	09/21/2021 05:27:00 UTC
Publish Date:	05/23/2017 02:30:44 UTC
Official Website:	Go to website
License:	MIT

Demo Download

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.5 (09/21/2021)

Correct bootstrap tabs-x left and right styles.

v1.3.4 (09/20/2021)

Enhancements to support Bootstrap v5.x framework.
Simplify NPM module handling.

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.

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

How to use it:

Changelog:

Related jQuery Plugins

You Might Also Like

Add Your Review