VVey / jquery-tabs

A jquery plugin that help show tabs in the page.

jQuery tabs

The powerful jQuery plugin that creates a tab. Project page and demos
Download: jquery-tabs-master.zip

---

Features

• History support — tabs can handle browser's back and forward buttons
• AJAXed tabs support — ajax load content support
• Keyboard navigation support — use Arrow left/right to navigate
• Lightweight size — 1 kb gzipped

Dependencies

• jQuery 1.83+

Usage

Import this libraries:

• jQuery
• jquery-tabs.min.js

And CSS:

• jquery-tabs.css - desirable if you have not yet connected one

Create base html element:

<ul class="demo tabs">
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>
<div class="panes">
    <div>panes</div>
    <div>panle2</div>
    <div>panle3</div>
</div>

Initialize tabs:

$(".demo").tabs({panes: '.panes'});

Or initialize tabs with custom settings:

$(".demo").tabs({
        namespace: 'tabs',  // namespace for css class
        panes: '.panes',
        skin: null,         // set custom skin
        initialIndex: 0,    // set initial index when first open
        effect: 'fade',     // set transition effect
        ajax: false,        // open ajax load function
        cached: false,      // if true, cach ajax load content after first loaded
        history: false,     // open history state function
        keyboard: false,    // keyboard navigation
        event: 'click'      // change index use 'click' or 'mouseover'
});

the most important thing is you should set panes value to let plugin find his panes content

Settings

Property	Default	Description
panes	'.panes'	compulsory property, specify the content to tabs
namespace	"tabs"	Optional property, set a namspace for css class, for example, we have .tabs_active class for active effect, if namespace set to 'as-tabs', then it will be .as-tabs_active
skin	null	Optional property, set transition effect, it works after you load specified skin file
initialIndex	0	Optional property, set initial index when tabs initilize
effect	'none'	Optional property, set transition effect, you can use 'fade', more effects are coming
ajax	false	Optional property, if true, it will load content with ajax, the url attached in tab list element's data-href
cached	false	Optional property, it works only when ajax is set to true, if true, tabs will cach loaded content
history	false	Optional property, if true, use history state function
keyboard	false	Optional property, if true , open keyboard navigation function
event	'click'	Optional property, the way to active tabs index, optioal 'mouseover'
onInit	null	Optional property, callback, call when tabs is initilized
onActive	null	Optional property, callback, call when tab is actived
onAfterAcitve	null	Optional property, callback, call after tab is actived

Public methods

jquery tabs has different methods , we can use it as below :

// active index
$(".demo").tabs("active", index);

// get all tabs element
$(".demo").tabs("getTabs");

// get all panes element
$(".demo").tabs("getPanes");

// get current index, start from 0
$(".demo").tabs("getIndex");

// get current pane element
$(".demo").tabs("getCurrentPane");

// get current tab elemnt
$(".demo").tabs("getCurrentTab");

// goto the next tab, the last will goto the first
$(".demo").tabs("next");

// goto the prevous tab, the first will goto the last
$(".demo").tabs("prev");

// remove tabs Dom element and unbound all events
$(".demo").tabs("destroy");

Event / Callback

• tabs::init: trigger when tabs initilize
• tabs::active: trigger when tabs is selected
• tabs::afterActive: trigger after acitve

how to use event:

$(document).on('tabs::init', function(event,instance) {
    // instance means current tabs instance 
    // some stuff
});

Browser support

jquery-tabs is verified to work in Internet Explorer 7+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser and others) is coming soon.

Changes

Version	Notes
0.2.x	(compare) add history function
0.1.x	(compare) add keyboard function
...	...

Author

amazingSurge

License

jQuery-tabs plugin is released under the GPL licence.