Flat Animated Tabs Plugin For jQuery - PWS Tabs

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

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.

<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. Create tabbed panels and 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. Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.

$('.demo').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,

// callback functions.
onBeforeFirstInit: function ()
{},
onAfterFirstInit: function ()
{},
onBeforeInit: function ()
{},
onAfterInit: function ()
{},
onBeforeChange: function ()
{},
onAfterChange: function ()
{}                       

});

5. API methods.

// destroy the plugin
$('.demo').pwstabs('destroy');

// add a new tab
$('.demo').pwstabs('addTab', {
  id: 'tab4',
  name: 'Tab name',
  icon: 'fa-phone',
  content: 'This is the content for tab number four'
});

// remove a specific tab
$('.demo').pwstabs('removeTab', 2);

// set options
$('.demo').pwstabs('effect', 'scrolldown');

// rebuild the plugin
$('.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.