jQuery Plugin to create tabs.
All you need to do is add few divs for your tabs, and script will generate Tabs for you.
You can check out online demo at http://alexchizhov.com/pwstabs
All you really need to do is to create a DIV block, with DIV blocks in it and add DATA attributes.
- Lets create main DIV:
<div class="hello_world"></div>- Lets say we want 3 tabs, lets create three DIVs and add DATA attributes like so:
<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. Tabs are created automaticaly with this name!
Just place plugins files into <head> section. Plugin requires jQuery!
<!-- Include jQuery if needed -->
<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>jQuery(document).ready(function($){
$('#tabset0').pwstabs();
});jQuery(document).ready(function($){
$('.tabset1').pwstabs({
effect: 'scale',
defaultTab: 3,
containerWidth: '600px'
});
});| Option | Default | Description | Available options |
|---|---|---|---|
| effect | scale | Transition effect | scale / slideleft / slideright / slidetop / slidedown |
| defaultTab | 1 | Which tab is chosen by default | Tab ID number starts with 1 (1,2,3..) |
| containerWidth | 100% | Tabs container width | Any size value (1,2,3.. / px,pt,em,%,cm..) |