PWS Tabs jQuery Plugin1.5.0 
PWS Tabs is a lightweight jQuery tabs plugin to create responsive flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
Nested tabsnew feature
PWS Tabs jQuery Plugin supports multilevel nested tabs. You can add unlimited tabs inside of tabs with custom settings.
PWS Tabs is Responsive
Install with Bower
$ bower install pwstabs
Demo
Online demo: http://alexchizhov.com/pwstabs
Documentation
Getting Started
- Include jQuery library and jQuery PWS Tabs plugin in the
<head>section.
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>
- Create tabbed panels and use HTML5
data-pws-*attributes to specify the ID & Name for the tabs.
<div class="hello_world">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>
</div>
data-pws-tab is used to initiate the tab and as its ID.
data-pws-tab-name is used for a tab display name.
- Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.
jQuery(function($){
$('.hello_world').pwstabs();
});
- Available parameters to customize the tabs plugin.
jQuery(function($){
$('.hello_world').pwstabs({
// scale / slideleft / slideright / slidetop / slidedown / none
effect: 'scale',
// The tab to be opened by default
defaultTab: 1,
// Set custom container width
// Any size value (1,2,3.. / px,pt,em,%,cm..)
containerWidth: '100%',
// Tabs position: horizontal / vertical
tabsPosition: 'horizontal',
// Tabs horizontal position: top / bottom
horizontalPosition: 'top',
// Tabs vertical position: left / right
verticalPosition: 'left',
// BETA: Make tabs container responsive: true / false (!!! BETA)
responsive: false,
// Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow
// pws_theme_gold / pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
theme: '',
// Right to left support: true/ false
rtl: false,
// Before first init callback function
onBeforeFirstInit: function() {},
// After first init callback function
onAfterFirstInit: function() {},
// Before init callback function
onBeforeInit: function() {},
// After init callback function
onAfterInit: function() {},
// Before tab change callback function
onBeforeChange: function() {},
// After tab change callback function
onAfterChange: function() {}
});
});
<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
<div class="hello_world">
<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>;
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>
</div>
Options
Methods
Since version 1.5.0 methods are available for PWS Tabs jQuery Plugin.
destroy()
Destroys plugin. Use the following code to call the method:
jQuery(function($){
$('.hello_world').pwstabs();
$('.hello_world').pwstabs('destroy');
});
addTab()
Add tab dynamically, for example on button click:
jQuery(function($){
$('.hello_world').pwstabs();
$('.button').on('click', function(){
$('.hello_world').pwstabs('addTab', {
id: 'tab4',
name: 'Tab name',
icon: 'fa-phone',
content: 'This is the content for tab number four'
});
});
});
As you can see the method accepts 4 parameteres:
id - the ID of the tab (same as data-pws-tab)
name - the name of the tab (same as data-pws-tab-name)
icon - FontAwesome icon name (same as data-pws-tab-icon)
content - the new tabs content
removeTab()
Remove tab dynamically, for example on button click:
jQuery(function($){
$('.hello_world').pwstabs();
$('.button').on('click', function(){
$('.hello_world').pwstabs('removeTab', 2);
});
});
The second tab will be removed. If the active tab is being removed, then the first tab will be chosen as active.
setOption()
You can update options dynamically, after the option is updated the plugin is being rebuild. Use the following code to update the options:
jQuery(function($){
$('.hello_world').pwstabs();
$('.button').on('click', function(){
$('.hello_world').pwstabs('effect', 'scrolldown');
$('.hello_world').pwstabs('defaultTab', 3);
});
});
Place the name of the option as the first argument and the value you want to change to as the second argument.
rebuild()
Rebuilds the plugin. Triggers destroy() and init() methods.
jQuery(function($){
$('.hello_world').pwstabs();
$('.button').on('click', function(){
$('.hello_world').pwstabs('rebuild');
});
});
Hooks
Since version 1.5.0 the hooks are available.
onBeforeFirstInit()
Is triggered before init() function for the first time the plugin is being initialized.
jQuery(function($){
$('.hello_world').pwstabs({
onBeforeFirstInit: function()
{
// Your code
}
});
});
onAfterFirstInit()
Is triggered after init() function for the first time the plugin is being initialized.
jQuery(function($){
$('.hello_world').pwstabs({
onAfterFirstInit: function()
{
// Your code
}
});
});
onBeforeInit()
Is triggered before init() function every time the plugin is being initialized or rebuild.
jQuery(function($){
$('.hello_world').pwstabs({
onBeforeInit: function()
{
// Your code
}
});
});
onAfterInit()
Is triggered after init() function every time the plugin is being initialized or rebuild.
jQuery(function($){
$('.hello_world').pwstabs({
onAfterInit: function()
{
// Your code
}
});
});
onBeforeChange()
Is triggered before the tab is being changed.
jQuery(function($){
$('.hello_world').pwstabs({
onBeforeChange: function()
{
// Your code
}
});
});
onAfterChange()
Is triggered after the tab is being changed.
jQuery(function($){
$('.hello_world').pwstabs({
onAfterChange: function()
{
// Your code
}
});
});
Changelog
Version 1.5.0 (20.12.2016)
- New hooks:
onBeforeFirstInit()
onAfterFirstInit()
onBeforeInit()
onAfterInit()
onBeforeChange()
onAfterChange() - New methods:
destroy()
addTab()
removeTab()
setOption()
rebuild() - Fixed effects for nested tabs
- Fixed responsive popup menu issue
Version 1.4.0 (06.03.2016)
- Nested tabs feature added
- iPhone tabs font-size issue fixed
- Tabs positioning changed from absolute to relative
- Container height is now handled with CSS not jQuery
- Font awesome is version 4.5.0 now
Version 1.3.0 (20.08.2015)
- Main CSS and JS file doesn't have verison number in its name now
- Code refactored and cleaned
- Tabs now have pws_show & pws_hide classes instead of a long named classes
- Styles classes are now added to the container not tabs
- New dark themes added, they are a little bit darker than white to use on a websites with white background
- Fixed vertical tabs width with icons
- Fixed margins and paddings for tabs controlls
- Font awesome folder renamed to /font-awesome/
- Font awesome is version 4.4.0 now
Version 1.2.1 (23.01.2015)
- To facilitate the creation of new color schemes for developers SASS files added to /assets/sass/ directory.
- Plugins StyleSheet /assets/jquery.pwstabs-1.2.1.css was generated from new SASS files (Very few changes from previous version)
Version 1.2.0 (21.01.2015)
- Made plugin responsive.
- Added themes support. 9 color schemes are available.
- Optimized code a bit.
- Added responsive.html file in /examples/ directory.
- Added colors examples in /examples/examples.html
Version 1.1.4 (19.01.2015)
- Added new effect: none. Good for eCommerce websites. Customers don't like to wait :)
- Font Awesome 4.2.0 Support => Tabs Icons
Version 1.1.3 (18.01.2015)
- Added tabsPosition settings: horizontal / vertical.
- Added verticalPosition settings: left / right.
- Updated stylesheets.
- Updated examples.
Version 1.1.2 (17.01.2015)
- Added RTL support.
- Added horizontalPosition settings: top / bottom.
- New examples with video, Google Maps and mixed content.
Version 1.1.1 (16.01.2015)
- Bug fix: added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.