Flat Animated Tabs Plugin For jQuery - PWS Tabs

PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.

Basic usage:

1. Load the jQuery PWS Tabs plugin and jQuery library in your Html page.

<link href="jquery.pwstabs.css" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.pwstabs.js"></script>

2. Create tabbed panels and use Html5 data-pws-* attributes to specify the ID & Name for the tabs.

<div class="demo">

  <div data-pws-tab="tab1" data-pws-tab-name="Tab 1">
    Tabbed Panel 1
  </div>
  
  <div data-pws-tab="tab2" data-pws-tab-name="Tab 2">
    Tabbed Panel 2
  </div>
  
  <div data-pws-tab="tab3" data-pws-tab-name="Tab 3"> 
    Tabbed Panel 3
  </div>
  
</div>

3. Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.

$('.demo').pwstabs();

4. Available parameters to customize the tabs plugin.

$('.demo').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,

// callback functions.
onBeforeFirstInit: function ()
{},
onAfterFirstInit: function ()
{},
onBeforeInit: function ()
{},
onAfterInit: function ()
{},
onBeforeChange: function ()
{},
onAfterChange: function ()
{}                       

});

5. API methods.

// destroy the plugin
$('.demo').pwstabs('destroy');

// add a new tab
$('.demo').pwstabs('addTab', {
  id: 'tab4',
  name: 'Tab name',
  icon: 'fa-phone',
  content: 'This is the content for tab number four'
});

// remove a specific tab
$('.demo').pwstabs('removeTab', 2);

// set options
$('.demo').pwstabs('effect', 'scrolldown');

// rebuild the plugin
$('.demo').pwstabs('rebuild');

Change logs:

v1.4.0 (2016-12-21)

• Added more methods and callbacks
• Fixed effects for nested tabs
• Fixed responsive popup menu issue

v1.4.0 (2016-03-06)

• 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

v1.3.0 (2015-08-21)

• 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

v1.2.1 (2015-01-23)

• 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)

v1.2.0 (2015-01-21)

• 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

v1.1.4 (2015-01-19)

• Added new effect: none. Good for eCommerce websites. Customers don't like to wait :)
• Font Awesome 4.2.0 Support => Tabs Icons

v1.1.3 (2015-01-18)

• Added tabsPosition settings: horizontal / vertical.
• Added verticalPosition settings: left / right.
• Updated stylesheets.
• Updated examples.

v1.1.2 (2015-01-17)

• Added RTL support.
• Added horizontalPosition settings: top / bottom.
• New examples with video, Google Maps and mixed content.

v1.1.1 (2015-01-17)

• Added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.

About Author:

Author: Alex Chizhov

Website: http://alexchizhov.com/pwstabs/

---

This awesome jQuery plugin is developed by alexchizhovcom. For more Advanced Usages, please check the demo page or visit the official website.