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

File Size: | 27.6 KB |
---|---|
Views Total: | 3937 |
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.
<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.