Tags: jQuery tabs, responsive tabs, tabbed content, tabbed
Version: 1.4
License: GPLv3
Contributors: dharmapoudel
Yet another simple, responsive, lightweight jQuery tab plugin.
###Description
jQueryTab is yet another jQuery tabs plugin for creating responsive tabbed panels with unlimited options and transition animations support.
###Features
Automatically coverts the tabs into accordion interface in smaller devices like iPad, iPhone, etc... Remembers last active tab using cookie.
- tabs transitions: normal and fade.
- accordion transitions: normal and slide.
- respects url fragments on page load
How to use it:
- Include jQuery javascript library in the web page.
2. Include jQueryTab's css and js in the page.
```html
<link rel="stylesheet" href="jQueryTab.css" type="text/css" media="screen" />
<script src="js/jQueryTab.js"></script>
- Follow the html structure below to build your tabbed panels.
Tabbed Content 1
Tabbed Content 2
Tabbed Content 3
Tabbed Content 4
- Call the plugin with options.
jQuery.jQueryTab({ responsive:true, // enable accordian on smaller screens collapsible:true, // allow all accordions to collapse useCookie: true, // remember last active tab using cookie openOnhover: false, // open tab on hover initialTab: 4, // tab to open initially; start count at 1 not 0 cookieName: 'active-tab', // name of the cookie set to remember last active tab cookieExpires: 4, // when it expires in days or standard UTC time cookiePath: '/', // path on which cookie is accessible cookieDomain:'', // domain of the cookie cookieSecure: false, // enable secure cookie - requires https connection to transfer tabClass:'tabs', // class of the tabs headerClass:'accordion_tabs', // class of the header of accordion on smaller screens contentClass:'tab_content', // class of container activeClass:'active', // name of the class used for active tab tabTransition: 'fade', // transitions to use - normal or fade tabIntime:500, // time for animation IN (1000 = 1s) tabOuttime:0, // time for animation OUT (1000 = 1s) accordionTransition: 'slide', // transitions to use - normal or slide accordionIntime:500, // time for animation IN (1000 = 1s) accordionOuttime:400, // time for animation OUT (1000 = 1s) before: function(){}, // function to call before tab is opened after: function(){}// function to call after tab is opened });
###Changelog###
= 1.4 =
* Several bug fixes and code optimization
= 1.0 =
* Initial Release