jQuery EasyTabs Plugin v2.1.2

21 March 2011

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

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
tabThe tab that was clicked
panelthe target panel for the tab that was clicked
datathe 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!' );
  }
});

About the author:

Steve Schwartz // Owner of Alfa Jango Web-based Software, creator of RateMyStudentRental & LeadNuke, engineer, hacker, rubyist, guitarist, aspiring racecar driverist.



Comments are loading...