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:
- Load tabs via AJAX
- Nest tab-set inside another tab-set
- Use non-standard markup for panels (for example, fieldsets inside a form)
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:
<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
.
<div id="panel-1">Panel content</div>
We can also load a page fragment with something like:
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());
$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);
}
});
-
View AJAX tab demo
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:
$('#subtabs').easytabs();
<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 example.com/page#subpanel-2
, and EasyTabs will automatically open panel-2 and subpanel-2 by default when the page loads.
-
View nested demo
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>
</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>
-
View custom panel markup demo
Get it now!
Check out the updated plugin homepage to download and view the docs.
-
View plugin homepage -
View changelog
Posted:
September 15th, 2011
Filed under:
HTML5, Javascript, JQuery, Open-source
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
41 Responses to “jQuery EasyTabs v2.3 released – AJAX tabs and more”
-
per says:September 23, 2011 at 6:54 am
Hello,
been looking at easyTabs and so far, great
but, can’t find a way to disable / enable one/more tabs ?
Hopefully easy, do you have a hint ?regards
-perReply-
Steve Schwartz says:September 27, 2011 at 8:51 pm
I don’t think I understand the question. What do you mean by disable/enable more tabs?
Reply
-
-
Craig Davies says:December 20, 2011 at 3:39 pm
Hello,
Been using easyTabs now for a couple of days, loading ajax into panels, but got a problem using the beforesend method, I am trying to load a gif image into the panel while the app is waiting for the data to arrive. Not having much luck at present do you have an example at hand I could view.
Many Thanks
Reply-
Steve Schwartz says:December 20, 2011 at 4:37 pm
Hey Craig, I do actually. Check out the example in this comment, using the
easytabs:ajax:beforeSend
andeasytabs:ajax:complete
event hooks instead.Reply
-
-
Bruce says:January 20, 2012 at 6:13 pm
Thanks Steve for the great plugin.
A question about nested tabs. I have an application which brings a set of nested tabs into an existing tab via an ajax call.
I want to make use of easyTabs’ ability to run nested tabs, but am uncertain how to substantiate them. As not all of the main tabs will have nested tabs – and the content of all tabs is populated via individual ajax calls, I’ve tried doing an “if-the-nested tab-container-exists-then-do $(‘#ID-of-nestedcontainer’).easytabs();)” once the ajax call for any given tab is completed – but this just yields an “The specified default tab (‘li:first-child’) could not be found in the tab set” error message.
If this description is understandable, can you offer a solution/course of action?
Thanks/Bruce
Reply-
Steve Schwartz says:January 22, 2012 at 3:55 pm
Hi Bruce, I just added a nested ajax example to the easytabs docs. Click the 3rd tab in the “AJAX Tabs example on the easytabs homepage.
Reply
-
-
Assaf Stieglitz says:February 11, 2012 at 3:24 am
Hi Steve,
i think your tabs are brilliant!i have a small problem, when using the tabs we use:
class=”#tabs1X2″
now i’ve have an essentialon the page’s head.
the tabs are working just fine, but their anchr looks like:
class=”www.xxx.com/#tabs1X2″ and in terms of SEO that say’s to the bot that there isn’t a page www.xxx.com/#tabs1X2 when in fact there isn’t and the tan won’t be indexed.
I’ve tried to change the tab’s href to class=”www.xxx.com/myPage.aspx/#tabs1X2″
but that’s cause a huge mess in the tabs, all of them are open one above the other.
How can i solve this issue?Thanks,
Assaf.Reply-
Assaf Stieglitz says:February 11, 2012 at 3:26 am
now i’ve have an essential – error sentence
now i’ve have a on theReply-
Assaf Stieglitz says:February 11, 2012 at 3:27 am
base href on the head
-
-
-
Assaf Stieglitz says:February 11, 2012 at 12:18 pm
follow up:
*my site is dynamic
now i’m using HttpContext.Current.Request.Url.AbsoluteUri
as base url for the link.one problem remains:
there are 3 tabs: tab-1, tab-2, tab-3
in terns of SEO: xxxtab-2 should lead to tab-2 when used from the address bar, but in fact it leads to the 1st tab tab-1
Thnaks!Reply-
Steve Schwartz says:February 11, 2012 at 12:30 pm
I’m not sure I’m completely understanding the issue. Is there any chance you could open a detailed ticket here? https://github.com/JangoSteve/jQuery-EasyTabs/issues
Reply
-
-
Andy says:February 13, 2012 at 9:57 am
Hi Steve,
Love the tabs! Thank you!
Could you give me an example where I can link to an external site such as www.google.com or another page on my site from within the tab container?
Currently when I try this it breaks everything.
Thanks!
Reply-
Steve Schwartz says:February 13, 2012 at 11:25 am
Do you mean:
a) in the body of the container?
b) having a tab that links to an external site instead of actually being a tab?
c) load the content from an external site into the body of the container when you click the tab?
If (a), then there shouldn’t be any problem. I don’t have a live example, but I just tried it and nothing happens.
If (b), then it should work. Easytabs would simply exclude that tab from the instantiated tab set since it doesn’t have a matching container, so it wouldn’t actually be touched by easytabs. You would just need to make sure you’re styling it properly to look like a tab.
If (c), then that won’t work without proxying to your server first, because it’s a cross-domain AJAX request, which is disallowed by browsers for security reasons.
Reply-
Andy says:February 22, 2012 at 6:38 am
Hi Steve, Apologies for not getting back to you. I got pulled onto a different project and I haven’t been able to focus on this until now.
Also sorry my explanation wasn’t very clear so let me try again…
I’m using the following JS:
$(document).ready(function(){
$('#tab-container')
.easytabs({
panelContext: $(document),
tabActiveClass: 'selected'
})
.bind('easytabs:after', function(e, $clicked, $targetPanel, settings) {
if ( $targetPanel.get(0).id ===
-
-