Version 1.1.4
PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
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.4.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 / 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
});
});5) PWS Tabs Plugin supports Font Awesome 4.2.0
5.1) Include Font Awesome stylesheet from assets directory:
<link type="text/css" rel="stylesheet" href="../assets/font-awesome-4.2.0/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>| 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..) | 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 | Define Horizontal tabs position | top / bottom | string |
| verticalPosition | left | Define Vertical tabs position | left / right | string |
| rtl | false | Right to left support | true / false | boolean |
- Added new effect: none. Good for eCommerce websites. Customers don't like to wait :)
- Font Awesome 4.2.0 Support => Tabs Icons
- 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.