jQuery EasyTabs v2.3 released - AJAX tabs and more

15 September 2011

The jQuery EasyTabs plugin has recently hit v2.3 (well, v2.3.3 by the time I got this published). New for EasyTabs this release:

See demos for each new feature below

AJAX tab content

It's been a long-time coming, and it's finally here. EasyTabs now supports loading content into panels via ajax.

EasyTabs has always placed emphasis on semantic, meaningful markup. Traditionally, markup for a tab/panel pair would look something like this:

<a href="#panel-1" class="tabs">I'm a tab</a>
<div id="panel-1">Panel content</div>

Notice that in the above example, if JavaScript is disabled, we're left with a normal anchor and anchor link in the page, which browsers understand by default.

The easiest way to modify a tab in order to specify that it's content comes from some ajax url would have been to add an HTML5 data- attribute, such as data-ajax. However, if JS were disabled, we're now left with an anchor link to an empty div on the page, with the actual url hidden behind a function-less data attribute.

So instead, I took a different approach with EasyTabs. If we want content for a tab to be loading via ajax, we put our ajax url in the href attribute where it belongs, and move the id of the target panel to a data attribute called data-target.

<a href="/some/ajax/path.html" data-target="#panel-1" class="tabs">I'm a tab</a>
<div id="panel-1">Panel content</div>

We can also load a page fragment with something like:

<a href="/some/ajax/path.html #some-element" data-target="#panel-1" class="tabs">I'm a tab</a>

By default, EasyTabs will load the content via ajax the first time the tab is clicked, and then hide/show the loaded content in the panel for each tab-change thereafter. If we want to have the tab re-request the ajax content each time it's clicked, we can set `{ cache: false }` in the easytabs options.

And finally, there are two new event hooks to which we can bind custom functionality, which will only be fired for ajax tabs: `easytabs:ajax:beforeSend` and `easytabs:ajax:complete`.

For example:

    .bind('easytabs:ajax:beforeSend', function(e, clicked, panel){
      var $this = $(clicked);
      $this.data('label', $this.html());
    .bind('easytabs:ajax:complete', function(e, clicked, panel, response, status, xhr) {
      var $this = $(clicked);
      if (status == "error") {
        var msg = "Sorry but there was an error: ";
        $("#error").html(msg + xhr.status + " " + xhr.statusText);

Nested tabs and anchors

We've always been able to have multiple instances of EasyTabs on one page. However, we couldn't previously deep-link to a tab-set which was nested inside the panel of another tab. That is no longer a problem.

So for example, if we had markup such as this:

<div id="#tabs">
  <a href="#panel-1" class="tabs">Tab 1</a>
  <a href="#panel-2" class="tabs">Tab 2</a>
  <div id="panel-1">Panel content</div>
  <div id="panel-2">
    <div id="#subtabs">
      <a href="#subpanel-1" class="tabs">Subtab 1</a>
      <a href="#subpanel-2" class="tabs">Subtab 2</a>
      <div id="subpanel-1">Panel content</div>
      <div id="subpanel-2">Link to me!</div>

We can now bookmark Subtab 2 directly, by sharing `http://example.com/page#subpanel-2`, and EasyTabs will automatically open panel-2 and subpanel-2 by default when the page loads.

Non-standard markup for panels

Panels no longer need to be div element, they can now be any markup we want. For example, the following now works:

  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
<fieldset id="tab1">
  <label>Tab 1 input</label>
  <input type="text" />
<fieldset id="tab2">
  <label>Tab 2 input</label>
  <input type="text" />

Get it now!

Check out the updated plugin homepage to download and view the docs.

About the author:

Steve Schwartz // Owner of Alfa Jango, CTO of Genomenon, co-founder of Carcode (acquired by Edmunds.com in 2014), engineer, developer, open-source enthusiast, guitarist, and racecar driverist.

Comments are loading...

We're Hiring!