Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, load tab content via ajax including caching, and more. This plugin includes various CSS3 styling enhancements and various tweaks to the core Bootstrap 3 Tabs plugin.
NOTE: The latest version of the plugin v1.3.2 has been released. Refer the CHANGE LOG for details.
The plugin offers these enhanced features:
- Supports various tab opening directions:
above
(default),below
,right
, andleft
. - Allows you to box the tab content in a new
bordered
style. This can work with any of the tab directions above. - Allows you to align the entire tab content to the
left
(default),center
, orright
of the parent container/page. - Automatically align & format heights and widths for bordered tabs for
right
andleft
positions. - Allows a rotated
sideways
tab header orientation for theright
andleft
tab directions. - Auto detect overflowing header labels for
sideways
orientation (with ellipsis styling) and display full label as a title on hover. - Ability to load tab content via ajax call.
- With release v1.3.0, you can use this like an enhanced jQuery plugin using the function
$fn.tabsX
on the.tabs-x
parent element.
View the plugin documentation and plugin demos at Krajee JQuery plugins.
- Bootstrap 3.x (Requires bootstrap
tabs.js
) - Latest JQuery
- Most browsers supporting CSS3 & JQuery.
You can use the bower
package manager to install. Run:
bower install bootstrap-tabs-x
You can use the composer
package manager to install. Either run:
$ php composer.phar require kartik-v/bootstrap-tabs-x "@dev"
or add:
"kartik-v/bootstrap-tabs-x": "@dev"
to your composer.json file
You can also manually install the plugin easily to your project. Just download the source ZIP or TAR ball and extract the plugin assets (css and js folders) into your project.
You must first load the following assets in your header.
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="path/to/css/bootstrap-tabs-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.js"></script>
<script src="path/to/js/bootstrap-tabs-x.min.js" type="text/javascript"></script>
If you noticed, you need to load the bootstrap.min.css
, jquery.min.js
, and bootstrap.min.js
in addition to the bootstrap-tabs-x.min.css
and bootstrap-tabs-x.min.js
for
the plugin to work with default settings.
Note: The plugin extends the bootstrap tabs plugin and hence the
bootstrap.min.js
must be loaded beforebootstrap-tabs-x.min.js
.
You just need to setup the markup for the extended bootstrap tabs to work now. Refer documentation for details.
<legend>Tabs Above Centered (Bordered)</legend>
<!-- tabs -->
<div class="tabs-x align-center tabs-above tab-bordered">
<ul class="nav nav-tabs">
<li class="active"><a href="#one2" data-toggle="tab">One</a></li>
<li><a href="#two2" data-toggle="tab">Two</a></li>
<li><a href="#three2" data-toggle="tab">Three</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="one2">Lorem ipsum dolor sit amet, charetra varius quam sit amet
vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero.
</div>
<div class="tab-pane" id="two2">Secondo sed ac orci quis tortor imperdiet venenatis. Duis elementum
auctor accumsan. Aliquam in felis sit amet augue.
</div>
<div class="tab-pane" id="three2">Thirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis
pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.
</div>
</div>
</div>
The javascript methods and events available in the core bootstrap tabs plugin will be available here as well. In addition, the tabsX
plugin function behavior is auto-initialized if you set the CSS class tabs-x
on a container element on the page (e.g. div
). You can optionally enable tabsX behavior manually via javascript. For example if your markup is like below:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
You can enable the tabsX plugin via javascript like below:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10
});
The entire tabs behavior can be controlled through HTML markup. The various markup options available for the bootstrap-tabs-x
plugin are mentioned below:
This is the most important part of setting up your extended tabs behavior. You must wrap the default bootstrap tabs markup within a div container with a tabs-x
class.
In addition, you can add positioning classes (e.g. tabs-above
) and alignment classes (e.g. align-center
) to this container. You can also add the sideways
orientation
class to rotate the tab headers sideways for the tabs-right
and tabs-left
positions.
<!-- tabs-x container -->
<div class="tabs-x align-{center|right} tabs-{above|below|right|left} {tab-sideways} {tab-bordered} {tab-height-(xs|sm|md|lg}">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
With release v1.1.0, the plugin supports loading content via ajax. You can configure the following properties to each tab link, for ajax loading:
data-url
: the server url that will process the ajax response and return a json encoded htmldata-loading-class
: the css class to be applied to the tab header when content is loading. Defaults tokv-tab-loading
.
For example:
<ul class="nav nav-tabs">
<li class="active"><a href="#one2" data-toggle="tab">One</a></li>
<li><a href="#two2" data-toggle="tab" data-url="/site/loadTab.php">Two</a></li>
<li><a href="#three2" data-toggle="tab">Three</a></li>
</ul>
The plugin by default includes a caching object to cache the content generated via Ajax. Refer enableCache
and cacheTimeout
plugin options for details.
You can set four different positions for your tabs - by adding one of the following CSS classes to your tabs container.
tabs-above
: The default tabs position - the navigation tabs will be placed above the tab content.tabs-below
: The navigation tabs will be placed below the tab content.tabs-left
: The navigation tabs will be placed left of the tab content.tabs-right
: The navigation tabs will be placed right of the tab content.
By default the tabs are aligned/floated to the left
of the parent container. In addition, you can set the following alignment options, by adding
one of the following CSS classes to your tabs container.
tab-align-center
: Align the entire tabs widget to thecenter
of your parent container.tab-align-right
: Align the entire tabs widget to theright
of your parent container.
NOTE: These alignments makes sense for working only with the
tabs-above
andtabs-below
positions. It is recommended not to use them with thetabs-right
andtabs-left
positions.
You can add the tab-bordered
class to the tabs container to make it boxed within a border. The border radius and box format will automatically
be adjusted based on your tab position.
By default each of the tab pane heights are automatically calculated. When using the tab-bordered
style, you may wish to set fixed heights, so the tab
widget dimensions are consistent for all tabs. For this you can add one of the following fixed height classes to your tabs container:
tab-height-xs
: Maintains a fixed tab pane height to an extra small height specification of135 px
, and overflows the extra content to scrollable.tab-height-sm
: Maintains a fixed tab pane height to a small height specification of195 px
, and overflows the extra content to scrollable.tab-height-sm
: Maintains a fixed tab pane height to a medium height specification of280 px
, and overflows the extra content to scrollable.tab-height-lg
: Maintains a fixed tab pane height to a large height specification of400 px
, and overflows the extra content to scrollable.
NOTE: You can add your own custom classes (names beginning with
tab-height-
) and the plugin will automatically format the vertical tabs borders (tabs-left
andtabs-right
) based on this. Note in this case your custom class must modify thetab-content
height like shown below:
/* custom fixed height class */
.tab-height-500 .tab-content {
height: 500px!important;
overflow: auto;
}
For the tabs-left
and tabs-right
positions, you can rotate the tab header labels to show it sideways
. For this you can add the tab-sideways
class
to your tabs container. In this case the tab header label width is fixed. Any long label text overflowing will not be wrapped and shown along with an ellipsis.
The plugin will automatically set the title attribute to show the complete label on hovering the tab header.
NOTE: The sideways orientation makes sense for working only with the
tabs-left
andtabs-right
positions. It is recommended not to use them with thetabs-above
andtabs-below
positions.
The plugin options can also be set as HTML5 data attributes on the tabs-x main container.
boolean, whether to enable caching of ajax generated tab pane content. Defaults to true
.
integer, timeout in milli-seconds after which cache will be refreshed. Defaults to 300000
(i.e. 5
minutes).
integer, the maximum length of characters in each tab pane title for sideways text orientation only. Text overflowing beyond this limit will be hidden with an ellipsis (and displayed on mouse hover of the tab title). Defaults to 9
.
object, the additional ajax options that you wish to send when submitting an ajax response and is applicable only for ajax tabs.
object, the callback function settings (only for ajax tabs) that will be triggered after successful rendering of the ajax content in the ajax tabs. You must set this as an associative array of key value pairs, where each key points to the tab pane identifier. For example if your tabs markup is as below:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane-1" data-toggle="tab">One</a></li>
<li><a href="#pane-2" data-toggle="tab" data-url="/site/loadTab.php">Two</a></li>
<li><a href="#pane-3" data-toggle="tab">Three</a></li>
</ul>
</div>
you can then setup a successCallback for each tab pane this way:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10,
successCallback: {
'pane-1': function (data, status, jqXHR) {
// callback code
},
'pane-2': function (data, status, jqXHR) {
// callback code
},
'pane-3': function (data, status, jqXHR) {
// callback code
}
}
});
object, the callback function settings (only for ajax tabs) that will be triggered after an error is received in rendering of the ajax content in the ajax tabs. You must set this as an associative array of key value pairs, where each key points to the tab pane identifier. For example if your tabs markup is as below:
<div id="tabs-container" class="align-center">
<ul class="nav nav-tabs">
<li class="active"><a href="#pane-1" data-toggle="tab">One</a></li>
<li><a href="#pane-2" data-toggle="tab" data-url="/site/loadTab.php">Two</a></li>
<li><a href="#pane-3" data-toggle="tab">Three</a></li>
</ul>
</div>
you can then setup a errorCallback
for each tab pane this way:
$("#tabs-container).tabsX({
enableCache: true,
maxTitleLength: 10,
errorCallback: {
'pane-1': function (jqXHR, status, message) {
// callback code
},
'pane-2': function (jqXHR, status, message) {
// callback code
},
'pane-3': function (jqXHR, status, message) {
// callback code
}
}
});
string, the additional CSS class to add to the tabs-x main container. This defaults to tabs-krajee
. The tabs-krajee
CSS class is included with the inbuilt CSS file and adds specific sizing and alignment for left and right positioned tabs.
The bootstrap-tabs-x
plugin triggers additional events in addition to the events triggered by the parent bootstrap tabs plugin. The event is triggered on each tab link containing [data-toggle=tab]
. The following events are available:
This event is triggered on clicking each tab and after content is typically shown in the tab.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX.click', function (event) {
console.log('tabsX.click event');
});
For ajax tabs, this event is triggered after the content is loaded in the tab pane. The following parameters are available with this event for ajax enabled tabs:
jqXHR
: object, thejQuery XMLHttpRequest
object used for the ajax transaction.status
: string, the status text received from the server via ajax response.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX.click', function (event, jqXHR, status) {
console.log('tabsX.click event');
});
This event is triggered before sending an ajax call to the server. It is applicable only for ajax tabs when you set a data-url
attribute on your tab link. The following parameters are available with this event:
jqXHR
: object, thejQuery XMLHttpRequest
object used for the ajax transaction.settings
: object, the settings object for jquery ajax before send.
$('div.tabs-x .nav-tabs [data-toggle="tab"]').on('tabsX.beforeSend', function (event, jqXHR, settings) {
console.log('tabsX.beforeSend event');
});
This event is triggered after successful completion of an ajax call to the server. It is applicable only for ajax tabs when you set a data-url
attribute on your tab link. The following additional parameters are available with this event:
data
: string, the output data retrieved from the server via ajax response.status
: string, the status text received from the server via ajax response.jqXHR
: object, thejQuery XMLHttpRequest
object used for the ajax transaction.
$('div.tabs-x').on('tabsX.beforeSend', function (event, data, status, jqXHR) {
console.log('tabsX.beforeSend event');
});
Note: Check the
successCallback
option of the plugin for an alternative easier way to configure callbacks on ajax success for all tab panes.
This event is triggered after an ajax processing error. It is applicable only for ajax tabs when you set a data-url
attribute on your tab link. The following additional parameters are available with this event:
jqXHR
: object, thejQuery XMLHttpRequest
object used for the ajax transaction.status
: string, the status text received from the server via ajax response.message
: string, the error exception message thrown.
$('div.tabs-x').on('tabsX.error', function (event, jqXHR, status, message) {
console.log('tabsX.error event with message = "' + message + '"');
});
Note: Check the
errorCallback
option of the plugin for an alternative easier way to configure callbacks on ajax error for all tab panes.
bootstrap-tabs-x is released under the BSD 3-Clause License. See the bundled LICENSE.md
for details.