alexchizhovcom/pwstabs alexchizhovcom/pwstabs

  • Stars
    star
    152
  • Rank 244,685 (Top 5 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 10 years ago
  • Updated about 6 years ago
Twitter logo Share LinkedIn logo Share Facebook logo Share
alexchizhovcom/pwstabs
github

alexchizhovcom

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

PWS Tabs jQuery Plugin

PWS Tabs jQuery Plugin1.5.0 Build Status

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

  1. 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>
  1. 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.

  1. Call the plugin on the parent element to create a basic tabs interface with 100% width and 'scale' transition effect.
jQuery(function($){
   $('.hello_world').pwstabs();
});
  1. Available parameters to customize the tabs plugin.
jQuery(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,
      
      // Before first init callback function
      onBeforeFirstInit: function() {},
      
      // After first init callback function
      onAfterFirstInit: function() {},
      
      // Before init callback function
      onBeforeInit: function() {},
      
      // After init callback function
      onAfterInit: function() {},
      
      // Before tab change callback function
      onBeforeChange: function() {},
      
      // After tab change callback function
      onAfterChange: function() {}

   });        
});

5) PWS Tabs Plugin supports Font Awesome 4.5.0

5.1) Include Font Awesome stylesheet from assets directory:

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

5.2) Use HTML5 `data-pws-tab-icon` attribute to set an icon. Icon names you can find here: Font Awesome Icons.

<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

Option Default Description Available options Type
effect scale Transition effect scale / slideleft / slideright / slidetop / slidedown / none string
defaultTab 1 Which tab is chosen by default Tab ID number starts with 1 (1,2,3..) number
containerWidth 100% Tabs container width Any size value (1,2,3.. / px,pt,em,%,cm..) string
tabsPosition horizontal Define tabs position horizontal / vertical string
horizontalPosition top Define Horizontal tabs position top / bottom string
verticalPosition left Define Vertical tabs position left / right string
theme '' Change tabs theme pws_theme_violet / pws_theme_green
pws_theme_yellow / pws_theme_gold
pws_theme_orange / pws_theme_red
pws_theme_purple / pws_theme_grey
pws_theme_dark_violet / pws_theme_dark_green
pws_theme_dark_yellow / pws_theme_dark_gold
pws_theme_dark_orange / pws_theme_dark_red
pws_theme_dark_purple / pws_theme_dark_grey		 string
responsive false Make tabs responsive true / false boolean
rtl false Right to left support true / false boolean

Methods

Since version 1.5.0 methods are available for PWS Tabs jQuery Plugin.

destroy()

Destroys plugin. Use the following code to call the method:

jQuery(function($){
   $('.hello_world').pwstabs();
   $('.hello_world').pwstabs('destroy');
});

addTab()

Add tab dynamically, for example on button click:

jQuery(function($){
   $('.hello_world').pwstabs();
   
   $('.button').on('click', function(){
      $('.hello_world').pwstabs('addTab', {
         id: 'tab4',
         name: 'Tab name',
         icon: 'fa-phone',
         content: 'This is the content for tab number four'
      });
   });
      
});

As you can see the method accepts 4 parameteres:
id - the ID of the tab (same as data-pws-tab)
name - the name of the tab (same as data-pws-tab-name)
icon - FontAwesome icon name (same as data-pws-tab-icon)
content - the new tabs content

removeTab()

Remove tab dynamically, for example on button click:

jQuery(function($){
   $('.hello_world').pwstabs();
   
   $('.button').on('click', function(){
      $('.hello_world').pwstabs('removeTab', 2);
   });
      
});

The second tab will be removed. If the active tab is being removed, then the first tab will be chosen as active.

setOption()

You can update options dynamically, after the option is updated the plugin is being rebuild. Use the following code to update the options:

jQuery(function($){
   $('.hello_world').pwstabs();
   
   $('.button').on('click', function(){
      $('.hello_world').pwstabs('effect', 'scrolldown');
      $('.hello_world').pwstabs('defaultTab', 3);
   });
      
});

Place the name of the option as the first argument and the value you want to change to as the second argument.

rebuild()

Rebuilds the plugin. Triggers destroy() and init() methods.

jQuery(function($){
   $('.hello_world').pwstabs();
   
   $('.button').on('click', function(){
      $('.hello_world').pwstabs('rebuild');
   });
      
});

Hooks

Since version 1.5.0 the hooks are available.

onBeforeFirstInit()

Is triggered before init() function for the first time the plugin is being initialized.

jQuery(function($){
   $('.hello_world').pwstabs({
      onBeforeFirstInit: function()
      {
         // Your code
      }
   });
});

onAfterFirstInit()

Is triggered after init() function for the first time the plugin is being initialized.

jQuery(function($){
   $('.hello_world').pwstabs({
      onAfterFirstInit: function()
      {
         // Your code
      }
   });
});

onBeforeInit()

Is triggered before init() function every time the plugin is being initialized or rebuild.

jQuery(function($){
   $('.hello_world').pwstabs({
      onBeforeInit: function()
      {
         // Your code
      }
   });
});

onAfterInit()

Is triggered after init() function every time the plugin is being initialized or rebuild.

jQuery(function($){
   $('.hello_world').pwstabs({
      onAfterInit: function()
      {
         // Your code
      }
   });
});

onBeforeChange()

Is triggered before the tab is being changed.

jQuery(function($){
   $('.hello_world').pwstabs({
      onBeforeChange: function()
      {
         // Your code
      }
   });
});

onAfterChange()

Is triggered after the tab is being changed.

jQuery(function($){
   $('.hello_world').pwstabs({
      onAfterChange: function()
      {
         // Your code
      }
   });
});

Changelog

Version 1.5.0 (20.12.2016)

  1. New hooks:
    onBeforeFirstInit()
    onAfterFirstInit()
    onBeforeInit()
    onAfterInit()
    onBeforeChange()
    onAfterChange()
  2. New methods:
    destroy()
    addTab()
    removeTab()
    setOption()
    rebuild()
  3. Fixed effects for nested tabs
  4. Fixed responsive popup menu issue

Version 1.4.0 (06.03.2016)

  1. Nested tabs feature added
  2. iPhone tabs font-size issue fixed
  3. Tabs positioning changed from absolute to relative
  4. Container height is now handled with CSS not jQuery
  5. Font awesome is version 4.5.0 now

Version 1.3.0 (20.08.2015)

  1. Main CSS and JS file doesn't have verison number in its name now
  2. Code refactored and cleaned
  3. Tabs now have pws_show & pws_hide classes instead of a long named classes
  4. Styles classes are now added to the container not tabs
  5. New dark themes added, they are a little bit darker than white to use on a websites with white background
  6. Fixed vertical tabs width with icons
  7. Fixed margins and paddings for tabs controlls
  8. Font awesome folder renamed to /font-awesome/
  9. Font awesome is version 4.4.0 now

Version 1.2.1 (23.01.2015)

  1. To facilitate the creation of new color schemes for developers SASS files added to /assets/sass/ directory.
  2. 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)

  1. Made plugin responsive.
  2. Added themes support. 9 color schemes are available.
  3. Optimized code a bit.
  4. Added responsive.html file in /examples/ directory.
  5. Added colors examples in /examples/examples.html

Version 1.1.4 (19.01.2015)

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

Version 1.1.3 (18.01.2015)

  1. Added tabsPosition settings: horizontal / vertical.
  2. Added verticalPosition settings: left / right.
  3. Updated stylesheets.
  4. Updated examples.

Version 1.1.2 (17.01.2015)

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

Version 1.1.1 (16.01.2015)

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