Submit your widget

PWS Tabs jQuery Plugin

Created 4 years ago   Views 11855   downloads 3164    Author alexchizhov
 PWS Tabs jQuery Plugin
View DemoDownload 675.8 KB
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="//"></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>


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.

Read more:

Tag: tabs