Submit your widget

PWS Tabs jQuery Plugin

Created 3 years ago   Views 10449   downloads 2727    Author alexchizhov
 PWS Tabs jQuery Plugin
View DemoDownload 675.8 KB
19
Share |

Help me improve, share PWS Tabs jQuery Plugin with your friends.

 

Getting Started

 

1) 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.js"></script>
2) 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.

data-pws-tab-icon is used to add an icon to a tab. Full URL to the icon (image).

3) 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();        
});

Read more:http://alexchizhov.com/pwstabs/#demos

Tag: tabs