####PWS Tabs is a lightweight jQuery tabs plugin to create responsive flat style tabbed content panels with some cool transition effects powered by CSS3 animations.
####PWS TABS is now Responsive!
This feature is still beta, please, help me test it and find possible issues.
Online demo: http://alexchizhov.com/pwstabs
$ bower install 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.2.1.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',
// 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.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..) | 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 |
string |
| responsive | false | !!BETA!! Make tabs responsive | true / false | boolean |
| rtl | false | Right to left support | true / false | boolean |
- To facilitate the creation of new color schemes for developers SASS files added to /assets/sass/ directory.
- Plugins StyleSheet /assets/jquery.pwstabs-1.2.1.css was generated from new SASS files (Very few changes from previous version)
- Made plugin responsive.
- Added themes support. 9 color schemes are available.
- Optimized code a bit.
- Added responsive.html file in /examples/ directory.
- Added colors examples in /examples/examples.html
- 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.