PWS Tabs is a lightweight jQuery tabs plugin to create flat
style tabbed content panels with some cool transition effects powered by CSS3
animations.
Demo
Download
1.Load the jQuery PWS Tabs plugin and jQuery library in your Html page.
<link href="jquery.pwstabs.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="jquery.pwstabs.js"></script>
2.Now Create tabbed menus with use Html5 (data-pws) attributes to specify the ID & Name for the tabs.
<div class="demo">
<div data-pws-tab="tab1" data-pws-tab-name="Tab 1">
Tabbed Panel 1
</div>
<div data-pws-tab="tab2" data-pws-tab-name="Tab 2">
Tabbed Panel 2
</div>
<div data-pws-tab="tab3" data-pws-tab-name="Tab 3">
Tabbed Panel 3
</div>
</div>
3. Next Call the plugin transition effects on the parent element to create a basic tabs interface with 100% width.
$('#tabset0').pwstabs();
4. Available parameters to customize the tabs plugin.
$('.demo').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
});
About Author:
Author: Alex Chizhov
Website: http://alexchizhov.com/pwstabs/
No comments :
Post a Comment