jQuery Plugin For Extended Bootstrap Tabs - bootstrap-tabs-x
File Size: | 39.5 KB |
---|---|
Views Total: | 6086 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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