Flat Animated Tabs Plugin For jQuery - PWS Tabs
File Size: | 702 KB |
---|---|
Views Total: | 7364 |
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.