jQuery EasyTabs Plugin Update: Now More Flexible and Usable

I've recently made the jQuery EasyTabs plugin more flexible and usable. These updates came out of upgrades to our web app, LeadNuke, which uses it in production on the Feature Tour page (and some internal pages as well). And best of all, thanks to some other optimizations, the EasyTabs plugin is still the exact same size, coming in at just 4KB!

So, without further ado, let's look at the updates.

Bookmarkable

The EasyTabs plugin now appends the hash for the selected tab to the URL when you click it. And more importantly, if the URL has a hash when the page is loaded and the hash matches one of your tabs, then that tab gets selected. If there is no hash, or if the hash does not match any of your tabs, then the default tab is selected, as before.

Example: `/somepage#second-tab`

This means that users can now click a tab, bookmark it or share the link with a friend, and then when that link is clicked, the intended tab gets loaded.

By the way, if for some reason you'd like to disable this feature (as well as the back- and forward-button support below), simply include the new option `updateHash: false` and the plugin will act exactly as in previous versions.

$('#tab-container').easyTabs({ updateHash: false });

Back- and Forward-Button Support

When adding the bookmarking functionality, I couldn't stop myself, so the plugin now supports the browser's back button when thumbing through tabs. The catch here is that it depends on another jQuery plugin to handle the back- and forward-button events.

I took this route, instead of baking it into the plugin, for two reasons:

1. using a separate plugin allows easier cross-browser compatibility even for old browsers that don't natively support the hashchange event (see explanation here)
2. it allows me to keep the EasyTabs plugin ultralight for those who don't care for this extra functionality.

The good news is that you have your choice of 3rd-party plugins. You can either use the jQuery Address plugin, which is popular, or the jQuery HashChange plugin (recommended), which I like for its simplicity and small size. Either way, just include one of these jQuery plugin files before including the EasyTabs plugin file, and it will just work!

Tab Cycling

Sometimes you want your tabbed content to automatically cycle through the tabs when the page is loaded. EasyTabs now allows you to do that by simply specifying the `cycle` parameter when calling `easyTabs()` with the time interval you want between cycles in milliseconds.

For instance, if you want your tabs to cycle every 5 seconds, simply call easyTabs like this:

$('#tab-container').easyTabs({ cycle: 5000 });

Cycling will stop if the user clicks one of the tabs manually. Also, if the page is loaded with one of the tabs specified in the URL (you know, with the new bookmarking support), cycling will be disabled.

More Flexible Tab Placement / Structure

This is what really started the update happy-fun-time. EasyTabs was originally conceived to give you maximum flexibility for the HTML structure of your tabs and content. And yet, your tabs had to be in a top-level unordered list `<ul>`. It seems I focused entirely on flexibility for order and placement of the target content panel `<div>`s while neglecting the tabs themselves.

Well, that wrong has now been righted. Now there is an optional parameter you can pass in called `tabs`, which must be a collection of tabs. There, that's easy enough. By default, the value for tabs is `> ul > li`. This selector value is relative to your tab container element.

For example, if your tabbed area looks like this:

<div id="tab-container">
  <ul>
    <li><a href="#tab1">First tab</a></li>
    <li><a href="#tab1">Another tab</a></li>
  </ul>
  <div id="tab1">Stuff</div>
  <div id="tab2">More stuff</div>
</div>

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

...then you'd just go with the default value, since your tabs would be selected by `#tab-container > ul > li`.

But now you can get really creative with your tabs, and nest them deep into your markup if need be...

<div id="tab-container">
  <div id="some-other-container">
    <div id="yet-another-container">
      <div class="some-tab-element">
        <a href="#tab1">First tab</a>
      </div>
      <div class="some-tab-element">
        <a href="#tab2">Another tab</a>
      </div>
    </div>
  </div>

  <div id="tab1">Stuff</div>
  <div id="tab2">More stuff</div>
</div>

$('#tab-container').easyTabs({
  tabs: '#yet-another-container > .some-tab-element';
});

Previously, the target content `<div>`s were flexible, and now the tabs themselves are also this flexible. Go nuts!

---