pwstabs

v1.4.0

Published

2 years ago

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

Downloads

1,190

0High
0Medium
0Low

alexchizhov

PWS Tabs jQuery Plugin 1.4.0

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

Nested tabsnew feature

PWS Tabs jQuery Plugin supports multilevel nested tabs. You can add unlimited tabs inside of tabs with custom settings.

##PWS Tabs is Responsive

Preview Preview

Install with Bower

$ bower install pwstabs

Demo

Online demo: http://alexchizhov.com/pwstabs

Preview

Documentation

Getting Started

Include jQuery library and jQuery PWS Tabs plugin in the <head> section.

<script src="https://code.jquery.com/jquery-1.12.1.min.js"</script>

<link type="text/css" rel="stylesheet" href="jquery.pwstabs.css">
<script src="jquery.pwstabs.js"></script>

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.

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

Available parameters to customize the tabs plugin.

jQuery(document).ready(function($){
   $('.hello_world').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

   });        
});

<link type="text/css" rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">

<div class="hello_world">

<div data-pws-tab="anynameyouwant1" data-pws-tab-name="Tab Title 1" data-pws-tab-icon="fa-heart">Our first tab</div>;
<div data-pws-tab="anynameyouwant2" data-pws-tab-name="Tab Title 2" data-pws-tab-icon="fa-star">Our second tab</div>
<div data-pws-tab="anynameyouwant3" data-pws-tab-name="Tab Title 3" data-pws-tab-icon="fa-map-marker">Our third tab</div>

</div>

Options

Changelog

Version 1.4.0 (06.03.2016)

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

Version 1.3.0 (20.08.2015)

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

Version 1.2.1 (23.01.2015)

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)

Version 1.2.0 (21.01.2015)

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

Version 1.1.4 (19.01.2015)

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

Version 1.1.3 (18.01.2015)

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

Version 1.1.2 (17.01.2015)

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

Version 1.1.1 (16.01.2015)

Bug fix: added class selector to tabs controller ul element. Solved issue with ul elements in tabs content.