PWS Tabs jQuery Plugin

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

Download: https://github.com/alexchizhovcom/pwstabs

Demonstration:

Plugin homepage:

Implementation:

Documentation

Getting Started

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

<code>&lt;script src="//code.jquery.com/jquery-1.11.2.min.js"&gt;&lt;/script&gt;
 
&lt;link type="text/css" rel="stylesheet" href="jquery.pwstabs.css"&gt;
&lt;script src="jquery.pwstabs-1.1.0.js"&gt;&lt;/script&gt;</code>

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

<code>&lt;div class="hello_world"&gt;
 
   &lt;div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1"&gt;Our first tab&lt;/div&gt;
   &lt;div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2"&gt;Our second tab&lt;/div&gt;
   &lt;div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3"&gt;Our third tab&lt;/div&gt;
 
&lt;/div&gt;</code>

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

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

data-pws-tab-icon is used to add an icon to a tab. Full URL to the icon (image).

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

<code>jQuery(document).ready(function($){
   $('.hello_world').pwstabs();        
});</code>

4) Available parameters to customize the tabs plugin.

<code>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',
 
      // Right to left support: true/ false
      rtl: false
 
   });        
});</code>

5) PWS Tabs Plugin supports Font Awesome 5

5.1) Include Font Awesome stylesheet from assets directory:

<code>&lt;link type="text/css" rel="stylesheet" href="../assets/font-awesome-4.2.0/css/font-awesome.min.css"&gt;</code>

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

<code>&lt;div class="hello_world"&gt;
 
   &lt;div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" <strong>data-pws-tab-icon="fa-heart"</strong>&gt;Our first tab&lt;/div&gt;
   &lt;div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" <strong>data-pws-tab-icon="fa-star"</strong>&gt;Our second tab&lt;/div&gt;
   &lt;div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" <strong>data-pws-tab-icon="fa-map-marker"</strong>&gt;Our third tab&lt;/div&gt;
 
&lt;/div&gt;</code>

Options:

effect	String	Default : scale – Transition effect
defaultTab	Integer	Default : 1 – Which tab is chosen by default
containerWidth	String	Default : 100% – Tabs container width
tabsPosition	String	Default : horizontal – Define tabs position
horizontalPosition	String	Default : top – Define Horizontal tabs position
verticalPosition	String	Default : left – Define Vertical tabs position
rtl	Boolean	Default : false – Right to left support

Screenshots:

About me