####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 jQuery Plugin supports multilevel nested tabs. You can add unlimited tabs inside of tabs with custom settings.
##PWS Tabs is Responsive
$ bower install pwstabs
Online demo: http://alexchizhov.com/pwstabs
- Include jQuery library and jQuery PWS Tabs plugin in the
<head>section.
<script src="https://code.jquery.com/jquery-1.12.1.min.js"</script>
<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.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.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>| 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 |
- Nested tabs feature added
- iPhone tabs font-size issue fixed
- Tabs positioning changed from absolute to relative
- Container height is now handled with CSS not jQuery
- Font awesome is version 4.5.0 now
- Main CSS and JS file doesn't have verison number in its name now
- Code refactored and cleaned
- Tabs now have pws_show & pws_hide classes instead of a long named classes
- Styles classes are now added to the container not tabs
- New dark themes added, they are a little bit darker than white to use on a websites with white background
- Fixed vertical tabs width with icons
- Fixed margins and paddings for tabs controlls
- Font awesome folder renamed to /font-awesome/
- Font awesome is version 4.4.0 now
- 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent