PWS Tabs

Demos

New Feature - Themes support

Light flat theme:

Dark flat theme:

Default Usage

$('.tabset0').pwstabs();

Nested Tabs Code

$('.tabsetnested1').pwstabs({
    tabsPosition: 'vertical',
});

$('.tabsetnested2').pwstabs();

trivoo.net

Tab With Mixed Content

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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut justo metus, sollicitudin in tempus a, tristique ut eros. Aenean sit amet tempus leo, et hendrerit nibh. Vestibulum sollicitudin nisl purus, sit amet fringilla metus consectetur rhoncus. Maecenas ultrices metus ut aliquam feugiat. Donec eleifend vel ante sit amet tristique. Proin vitae interdum lectus. Nam a turpis hendrerit odio eleifend varius vel sed elit. Praesent auctor erat sed aliquet tempus. Etiam porttitor erat eu turpis egestas cursus. Vivamus varius vulputate lacus, vitae dictum libero gravida a. Nunc ac arcu tortor. Nulla suscipit ultricies nisl sit amet sodales. Praesent ultricies vestibulum magna at cursus. Cras venenatis tellus sed justo mattis rhoncus ut ac justo. Etiam ullamcorper massa ac dui suscipit, non pulvinar eros egestas.

Ut metus turpis, rhoncus ut lacus auctor, lobortis rutrum ex. Phasellus at sodales velit. Proin quis facilisis sem. Maecenas eu posuere tellus, eget accumsan ex. Nulla eget auctor ipsum, at tempus magna. Vestibulum molestie a diam eleifend eleifend. Praesent eleifend in lectus et maximus. Vivamus vitae justo magna. Proin ultrices ex sed turpis pellentesque eleifend. Integer accumsan gravida est a venenatis. Aenean volutpat nunc vitae libero condimentum pharetra.

Nunc convallis aliquam magna, in lobortis lorem pellentesque quis. Proin a pharetra purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque eros quam, scelerisque id euismod ut, porta nec urna. Etiam consectetur velit elit. Suspendisse varius nisl tortor, vitae viverra est bibendum a. Pellentesque dapibus lorem nec fringilla pharetra. Fusce ac cursus mi. Nam scelerisque ultricies lobortis. Nullam scelerisque lorem diam, sit amet tincidunt lorem viverra vel. Quisque aliquet arcu nec lorem accumsan, id pulvinar urna molestie.

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.

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'
});

Effect: None

$('.tabset10').pwstabs({
   effect: 'none',
   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'
});

Tabs with icons

$('.tabset11').pwstabs({
   effect: 'scale',
   containerWidth: '600px'
});

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.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.

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.

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 / 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:

<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">

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

<div class="hello_world">

   <div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>
   <div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
   <div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>

</div>

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

PWS Tabs jQuery Plugin