The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

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.

Tags :

Plugin rate :

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

Implementation: 

Documentation

Getting Started

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

1
2
3
4
<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.

1
2
3
4
5
6
7
<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.

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

4) Available parameters to customize the tabs plugin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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 4.2.0

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.

1
2
3
4
5
6
7
<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
  • PWS Tabs

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
Current version
1.1.4
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [0]