# [PWS Tabs jQuery Plugin](http://alexchizhov.com/pwstabs)[1.4.0](#version-140-06032016) [![Build Status](https://travis-ci.org/alexchizhovcom/pwstabs.svg?branch=master)](https://travis-ci.org/alexchizhovcom/pwstabs) ####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 ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabsresponsive600.jpg) ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabsresponsive600menu.jpg) ## Install with Bower `$ bower install pwstabs` ## Demo Online demo: [http://alexchizhov.com/pwstabs](http://alexchizhov.com/pwstabs) ![Preview](http://alexchizhov.com/pwstabs/screenshots/pwstabs1.2.0.jpg) ## Documentation ### Getting Started 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
Our first tab
Our second tab
Our third tab
``` `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
Our first tab
;
Our second tab
Our third tab
``` ## 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 ### Version 1.4.0 (06.03.2016) 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 ### Version 1.3.0 (20.08.2015) 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 ### Version 1.2.1 (23.01.2015) 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) ### Version 1.2.0 (21.01.2015) 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 ### Version 1.1.4 (19.01.2015) 1) Added new effect: none. Good for eCommerce websites. Customers don't like to wait :)
2) Font Awesome 4.2.0 Support => Tabs Icons ### Version 1.1.3 (18.01.2015) 1) Added tabsPosition settings: horizontal / vertical.
2) Added verticalPosition settings: left / right.
3) Updated stylesheets.
4) Updated examples. ### Version 1.1.2 (17.01.2015) 1) Added RTL support.
2) Added horizontalPosition settings: top / bottom.
3) New examples with video, Google Maps and mixed content. ### Version 1.1.1 (16.01.2015) 1) Bug fix: added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.