Flat Animated Tabs Plugin For jQuery PWS Tabs - Download Flat Animated Tabs Plugin For jQuery - PWS Tabs

Download Flat Animated Tabs Plugin For jQuery – PWS Tabs

By Posted on

This time I will share jQuery Plugin and tutorial about Flat Animated Tabs Plugin For jQuery – PWS Tabs, hope it will help you in programming stack.

Flat Animated Tabs Plugin For jQuery PWS Tabs - Download Flat Animated Tabs Plugin For jQuery - PWS Tabs
File Size: 702 KB
Views Total: 6996
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

PWS Tabs is a lightweight jQuery tabs plugin to create flat style tabbed content panels with some cool transition effects powered by CSS3 animations.

Basic usage:

1. Load the jQuery PWS Tabs plugin and jQuery library in your Html page.

view source
1 <link href="jquery.pwstabs.css" rel="stylesheet">
2  
3 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
4 <script src="jquery.pwstabs.js"></script>

2. Create tabbed panels and use Html5 data-pws-* attributes to specify the ID & Name for the tabs.

view source
01 <div class="demo">
02  
03   <div data-pws-tab="tab1" data-pws-tab-name="Tab 1">
04     Tabbed Panel 1
05   </div>
06    
07   <div data-pws-tab="tab2" data-pws-tab-name="Tab 2">
08     Tabbed Panel 2
09   </div>
10    
11   <div data-pws-tab="tab3" data-pws-tab-name="Tab 3">
12     Tabbed Panel 3
13   </div>
14    
15 </div>

3. Call the plugin on the parent element to create a basic tabs interface with 100% width and ‘scale’ transition effect.

view source
1 $('.demo').pwstabs();

4. Available parameters to customize the tabs plugin.

view source
01 $('.demo').pwstabs({
02  
03 // scale / slideleft / slideright / slidetop / slidedown / none
04 effect: 'scale',
05  
06 // The tab to be opened by default
07 defaultTab: 1,   
08  
09 // Set custom container width
10 // Any size value (1,2,3.. / px,pt,em,%,cm..)
11 containerWidth: '100%',
12  
13 // Tabs position: horizontal / vertical
14 tabsPosition: 'horizontal',
15  
16 // Tabs horizontal position: top / bottom
17 horizontalPosition: 'top',
18  
19 // Tabs vertical position: left / right
20 verticalPosition: 'left',
21  
22 // BETA: Make tabs container responsive: true / false (!!! BETA)
23 responsive: false,
24  
25 // Themes available: default: '' / pws_theme_violet / pws_theme_green / pws_theme_yellow
26 // pws_theme_gold / pws_theme_orange / pws_theme_red / pws_theme_purple / pws_theme_grey
27 theme: '',
28  
29 // Right to left support: true/ false
30 rtl: false,
31  
32 // callback functions.
33 onBeforeFirstInit: function ()
34 {},
35 onAfterFirstInit: function ()
36 {},
37 onBeforeInit: function ()
38 {},
39 onAfterInit: function ()
40 {},
41 onBeforeChange: function ()
42 {},
43 onAfterChange: function ()
44 {}                      
45  
46 });

5. API methods.

view source
01 // destroy the plugin
02 $('.demo').pwstabs('destroy');
03  
04 // add a new tab
05 $('.demo').pwstabs('addTab', {
06   id: 'tab4',
07   name: 'Tab name',
08   icon: 'fa-phone',
09   content: 'This is the content for tab number four'
10 });
11  
12 // remove a specific tab
13 $('.demo').pwstabs('removeTab', 2);
14  
15 // set options
16 $('.demo').pwstabs('effect', 'scrolldown');
17  
18 // rebuild the plugin
19 $('.demo').pwstabs('rebuild');

Change logs:

v1.4.0 (2016-12-21)

  • Added more methods and callbacks
  • Fixed effects for nested tabs
  • Fixed responsive popup menu issue

v1.4.0 (2016-03-06)

  • 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

v1.3.0 (2015-08-21)

  • 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

v1.2.1 (2015-01-23)

  • 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)

v1.2.0 (2015-01-21)

  • 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

v1.1.4 (2015-01-19)

  • Added new effect: none. Good for eCommerce websites. Customers don’t like to wait 🙂
  • Font Awesome 4.2.0 Support => Tabs Icons

v1.1.3 (2015-01-18)

  • Added tabsPosition settings: horizontal / vertical.
  • Added verticalPosition settings: left / right.
  • Updated stylesheets.
  • Updated examples.

v1.1.2 (2015-01-17)

  • Added RTL support.
  • Added horizontalPosition settings: top / bottom.
  • New examples with video, Google Maps and mixed content.

v1.1.1 (2015-01-17)

  • Added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.

About Author:

Author: Alex Chizhov

Website: http://alexchizhov.com/pwstabs/

This awesome jQuery plugin is developed by alexchizhovcom. For more Advanced Usages, please check the demo page or visit the official website.

source : jqueryscript.net

Related posts: