PWS Tabs jQuery Plugin^1.4.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 tabs^{new feature}

PWS Tabs jQuery Plugin supports multilevel nested tabs. You can add unlimited tabs inside of tabs with custom settings.

##PWS Tabs is Responsive

!Preview !Preview

Install with Bower

$ bower install pwstabs

Demo

Online demo: http://alexchizhov.com/pwstabs

!Preview

Documentation

$3

1) Include jQuery library and jQuery PWS Tabs plugin in the section.
``html

`

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

`html



`

data-pws-tab is used to initiate the tab and as its ID.

data-pws-tab-name is used for a tab display name.


3) Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.
`js
jQuery(document).ready(function($){
$('.hello_world').pwstabs();
});
`

4) Available parameters to customize the tabs plugin.
`js
jQuery(document).ready(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

});
});
`




5) PWS Tabs Plugin supports Font Awesome 4.5.0

5.1) Include Font Awesome stylesheet from assets directory:

`html

`

5.2) Use HTML5 data-pws-tab-icon attribute to set an icon. Icon names you can find here: Font Awesome Icons.

`html



``

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	!!BETA!! Make tabs responsive	true / false	boolean
rtl	false	Right to left support	true / false	boolean

Changelog

$3

1) Nested tabs feature added

2) iPhone tabs font-size issue fixed

3) Tabs positioning changed from absolute to relative

4) Container height is now handled with CSS not jQuery

5) Font awesome is version 4.5.0 now

$3

1) Main CSS and JS file doesn't have verison number in its name now

2) Code refactored and cleaned

3) Tabs now have pws_show & pws_hide classes instead of a long named classes

4) Styles classes are now added to the container not tabs

5) New dark themes added, they are a little bit darker than white to use on a websites with white background

6) Fixed vertical tabs width with icons

7) Fixed margins and paddings for tabs controlls

8) Font awesome folder renamed to /font-awesome/

9) Font awesome is version 4.4.0 now

$3

1) To facilitate the creation of new color schemes for developers SASS files added to /assets/sass/ directory.

2) Plugins StyleSheet /assets/jquery.pwstabs-1.2.1.css was generated from new SASS files (Very few changes from previous version)

$3

1) Made plugin responsive.

2) Added themes support. 9 color schemes are available.

3) Optimized code a bit.

4) Added responsive.html file in /examples/ directory.

5) Added colors examples in /examples/examples.html

$3

1) Added new effect: none. Good for eCommerce websites. Customers don't like to wait :)

2) Font Awesome 4.2.0 Support => Tabs Icons

$3

1) Added tabsPosition settings: horizontal / vertical.

2) Added verticalPosition settings: left / right.

3) Updated stylesheets.

4) Updated examples.

$3

1) Added RTL support.

2) Added horizontalPosition settings: top / bottom.

3) New examples with video, Google Maps and mixed content.

$3

1) Bug fix: added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.