jQuery EasyTabs Plugin v2.1.2

The jQuery EasyTabs plugin is now at version 2.1.0 2.1.2 (I managed to bump the version number twice before publishing this post). This release adds three four new features:

• uiTabs option
• collapsible option
• Cancel tab-change in 'easytabs:before' hook
• Useful parameters in callback hooks

• View demo with new features
• View plugin homepage
• View changelog

uiTabs option

Perhaps my favorite addition to the EasyTabs options, when `uiTabs: true`, EasyTabs will automatically add and use the same class names used by the jQuery UI tabs. This feature opens the doorway to making EasyTabs a drop-in replacement for jQuery UI tabs once you've outgrown UI's out-of-the-box theming and structure.

If you are currently using UI tabs with this:

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

Simply replace the above line with this:

$('#tab-container').easytabs({ uiTabs: true });

And your tabs will still look and function the same as before. Now you can start customizing the CSS and HTML markup with the flexibility of EasyTabs.

Note that EasyTabs currently only supports the `collapsible` option of UI tabs (for now). So if you're using any of UI tabs other options, these will need to be removed. If you would like support added for a specific option, request it in the GitHub issue tracker, or even fork the project and submit a pull request.

collapsible option

By request, the `collapsible` option has been added to EasyTabs. This allows an active tab to be "de-selected", or collapsed, when clicked again.

$('#tab-container').easytabs({ collapsible: true });

This will also cause all tabs to be collapsed initially. However, this behavior may be overridden (such that the default tab will be expanded by default) with the `collapsedByDefault` option:

$('#tab-container').easytabs({
  collapsible: true,
  collapsedByDefault: false 
});

Alternatively, if a `defaultTab` is specified, then the default tab will be expanded by default as well (as if `collapsedByDefault` were true).

Also, when a panel is collapsed, EasyTabs adds the `collapsed` class name to the tab, so that it may be styled uniquely (perhaps grayed out) in your CSS. You can override the collapsed CSS class name with the `collapsedClass` option:

$('#tab-container').easytabs({
  collapsible: true,
  collapsedClass: "my-collapsed-tab"
});

Cancel tab-change in before-hook

And finally, also by request, you can now cancel the tab change event in the `easytabs:before` event hook. If a function bound to the `easytabs:before` hook returns false, then the tab-change event will be aborted. A simple use-case for this might be:

$('#tab-container').bind('easytabs:before', function(){
  return confirm("Are you sure you want to switch tabs?");
});

Useful parameters in callback hooks

In the callback hooks, it's useful to know what tab was clicked, what the target panel is, etc. Now it's possible. All three callback hooks (`easytabs:before`, `easytabs:midTransition`, and `easytabs:after`), pass the following parameters to the handler functions:

Parameter	Value
`tab`	The tab that was clicked
`panel`	the target panel for the tab that was clicked
`data`	the EasyTab data for that container, include `tabs`, `panels`, and `opts` (the options set for EasyTabs)

So, for example, we can do this:

$('#tab-container').bind('easytabs:before', function(evt, tab, panel, data) {
  if ( tab.hasClass('special-alert') ) {
    alert( 'Hi there, you are special!' );
  }
});

• View demo with new features

---