Version 1.1.3
PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
All you need to do is add few divs for your tabs, and script will generate Tabs for you.
Online demo: http://alexchizhov.com/pwstabs
- 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>- 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.
- 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();
});- 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
});
});| 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 |
- Added tabsPosition settings: horizontal / vertical.
- Added verticalPosition settings: left / right.
- Updated stylesheets.
- Updated examples.
- Added RTL support.
- Added horizontalPosition settings: top / bottom.
- New examples with video, Google Maps and mixed content.
- Bug fix: added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.