jQuery EasyTabs Plugin V2

jQuery EasyTabs has reached version 2.0! We're so proud, they grow up so gosh darn fast these days.

If you don't know, EasyTabs is our jQuery plugin that allows you to create simple, easily customizable tabs, keeping your markup clean and easy to style.

EasyTabs v2 is completely backwards compatible with v1.x, so you should be able to swap in the new version, with only one minor modification:

$('#tab-container').easyTabs();

... now becomes:

$('#tab-container').easytabs();

We simply dropped the capitalization of the "T" to make it easier to type.

So, what's new for EasyTabs v2?

Refactored Code

The entire plugin has been refactored (nearly an 85% re-write) with much cleaner, more modular code. Why should you care? Well, in the process of cleaning up the code, various small bugs have been fixed. This is largely thanks to the elimination of some global JavaScript variables that could have caused conflicts with other plugins, and even between EasyTabs instances, if multiple were on the same page.

For a complete list of bug fixes, see the CHANGELOG at the bottom of the page.

Event Hooks

Some useful event hooks have been added, to which you can attach your own functionality. Here are the events you can now bind to:

easytabs:before        // fires before a tab is selected
easytabs:midTransition // fires after the previous panel has been hidden, but before the next is shown
easytabs:after         // fires after a tab has been selected (and after the panel is completely finished transitioning in)

Check out the documentation for more info on using these callbacks.

Public "select" method

There is also a new public `select` method that allows you to manually select a tab.

$('#tab-container').easytabs('select', '#tab-2');

Again, check out the docs for more info.

Go to jQuery EasyTabs »

 

---