PWS Tabs

Effect: Scale

$('.tabset1').pwstabs({

   effect: 'scale',

   defaultTab: 3,

   containerWidth: '600px'

});

Cras semper dui non ante mattis blandit. Sed turpis nisi, vehicula a augue a, blandit mollis tellus. Nullam bibendum quam at pulvinar convallis. Donec molestie tempor aliquam. Etiam sed aliquet eros. Nam eleifend, libero at interdum ornare, turpis metus semper justo, quis posuere neque nulla sed lorem. Fusce at consectetur sem, sed varius nibh. Donec ac ipsum pharetra sapien pellentesque porttitor et eget nibh. Pellentesque non nisl varius, pulvinar dolor id, placerat mauris. Suspendisse vestibulum semper magna, sed tristique mi gravida vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras eu consectetur libero, id venenatis nunc. Nullam ullamcorper auctor nulla, rutrum euismod justo auctor id. Aenean velit tellus, suscipit eu pulvinar vitae, placerat non odio.

Donec pellentesque placerat mi, at rutrum metus tempor posuere. Nunc ut pellentesque purus. Nam auctor, magna eget elementum maximus, ligula augue ornare massa, id varius magna mi vel diam. Cras vel pharetra risus. Suspendisse eu varius nisl, a laoreet est. Proin vitae erat metus. Curabitur dictum elit in ante feugiat cursus.

Quisque magna elit, maximus vel neque eget, laoreet commodo neque. Duis elementum ligula id metus rutrum, non vestibulum augue porttitor. Duis ullamcorper urna erat, vel convallis ipsum mattis vitae. Proin porttitor urna a enim ultrices ultrices. Etiam lacus elit, tincidunt vitae congue eu, sagittis sit amet ipsum. Nulla facilisi. Curabitur id elementum est. In eget lectus euismod, efficitur lorem sed, feugiat sem. Donec vel massa mi.

Effect: SlideLeft

$('.tabset2').pwstabs({

   effect: 'slideleft',

   defaultTab: 2,

   containerWidth: '600px'

});

Effect: SlideRight

$('.tabset5').pwstabs({

   effect: 'slideright',

   defaultTab: 1,

   containerWidth: '600px'

});

Effect: SlideTop

$('.tabset3').pwstabs({

   effect: 'slidetop',

   defaultTab: 3,

   containerWidth: '600px'

});

Effect: SlideDown

$('.tabset4').pwstabs({

   effect: 'slidedown',

   defaultTab: 2,

   containerWidth: '600px'

});

RTL Support

$('.tabset6').pwstabs({

   effect: 'slidedown',

   defaultTab: 2,

   containerWidth: '600px',

   rtl: true

});

Tabs Position Horizontal Bottom

$('.tabset7').pwstabs({

   effect: 'slidedown',

   defaultTab: 2,

   containerWidth: '600px',

   horizontalPosition: 'bottom'

});

Tabs Position Vertical Left

$('.tabset8').pwstabs({

   effect: 'slideleft',

   defaultTab: 1,

   containerWidth: '600px',

   tabsPosition: 'vertical',

   verticalPosition: 'left'

});

Tabs Position Vertical Right

$('.tabset9').pwstabs({

   effect: 'slideright',

   defaultTab: 1,

   containerWidth: '600px',

   tabsPosition: 'vertical',

   verticalPosition: 'right'

});

Documentation

Getting Started

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

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>



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

<script src="jquery.pwstabs-1.1.0.js"></script>

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

<div class="hello_world">



   <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1">Our first tab</div>

   <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2">Our second tab</div>

   <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3">Our third tab</div>



</div>

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.

jQuery(document).ready(function($){

   $('.hello_world').pwstabs();        

});

4) Available parameters to customize the tabs plugin.

jQuery(document).ready(function($){

   $('.hello_world').pwstabs({



      // scale, slideleft, slideright, slidetop, slidedown

      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



   });        

});

Options

Option	Default	Description	Available options	Type
effect	scale	Transition effect	scale / slideleft / slideright / slidetop / slidedown	string
defaultTab	1	Which tab is chosen by default	Tab ID number starts with 1 (1,2,3..)	string
containerWidth	100%	Tabs container width	Any size value (1,2,3.. / px,pt,em,%,cm..)	number
tabsPosition	horizontal	Define tabs position	horizontal / vertical	string
horizontalPosition	top	Horizontal position of Tabs controlls	top / bottom	string
verticalPosition	left	Define Vertical tabs position	left / right	string
rtl	false	Right to left support	true / false	boolean

PWS Tabs jQuery Plugin