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() {} }); });5) PWS Tabs Plugin supports Font Awesome 4.5.0
5.1) Include Font Awesome stylesheet from assets directory:
<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">5.2) Use HTML5 `data-pws-tab-icon` attribute to set an icon. Icon names you can find here: Font Awesome Icons.
<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
| Option | Default | Description | Available options | Type |
|---|---|---|---|---|
| effect | scale | Transition effect | scale / slideleft / slideright / slidetop / slidedown / none | string |
| defaultTab | 1 | Which tab is chosen by default | Tab ID number starts with 1 (1,2,3..) | number |
| containerWidth | 100% | Tabs container width | Any size value (1,2,3.. / px,pt,em,%,cm..) | string |
| tabsPosition | horizontal | Define tabs position | horizontal / vertical | string |
| horizontalPosition | top | Define Horizontal tabs position | top / bottom | string |
| verticalPosition | left | Define Vertical tabs position | left / right | string |
| theme | '' | Change tabs theme | pws_theme_violet / pws_theme_green pws_theme_yellow / pws_theme_gold pws_theme_orange / pws_theme_red pws_theme_purple / pws_theme_grey pws_theme_dark_violet / pws_theme_dark_green pws_theme_dark_yellow / pws_theme_dark_gold pws_theme_dark_orange / pws_theme_dark_red pws_theme_dark_purple / pws_theme_dark_grey | string |
| responsive | false | Make tabs responsive | true / false | boolean |
| rtl | false | Right to left support | true / false | boolean |
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.
