jQuery EasyTabs v2.3 released - AJAX tabs and more

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:

$('#container') .bind('easytabs:ajax:beforeSend', function(e, clicked, panel){ var $this = $(clicked); $this.data('label', $this.html()); $this.html('Loading...'); }) .bind('easytabs:ajax:complete', function(e, clicked, panel, response, status, xhr) { var $this = $(clicked); $this.html($this.data('label')); 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:

$('#tabs').easytabs(); $('#subtabs').easytabs();

<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> </div> </div> </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:

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

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.





