Remotipart 1.0 Released
Communication in Engineering, Software, and Open-source

jQuery EasyTabs v2.3 released – AJAX tabs and more

September 15th, 2011 by Steve Schwartz

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:

<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);
      }
    });

  • spacer 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:

$('#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 example.com/page#subpanel-2, and EasyTabs will automatically open panel-2 and subpanel-2 by default when the page loads.


  • spacer 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:

<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>

  • spacer View custom panel markup demo

Get it now!

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


  • spacer View plugin homepage

  • spacer View changelog
spacer

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”

  1. spacer per says:
    September 23, 2011 at 6:54 am

    Hello,

    been looking at easyTabs and so far, great spacer
    but, can’t find a way to disable / enable one/more tabs ?
    Hopefully easy, do you have a hint ?

    regards
    -per

    Reply
    • spacer 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
  2. spacer 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
    • spacer 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 and easytabs:ajax:complete event hooks instead.

      Reply
  3. spacer 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
    • spacer 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
  4. spacer 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 essential

    on 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
    • spacer Assaf Stieglitz says:
      February 11, 2012 at 3:26 am

      now i’ve have an essential – error sentence
      now i’ve have a on the

      Reply
      • spacer Assaf Stieglitz says:
        February 11, 2012 at 3:27 am

        base href on the head

  5. spacer 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
    • spacer 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
  6. spacer 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
    • spacer 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
      • spacer 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 ===
gipoco.com is neither affiliated with the authors of this page nor responsible for its contents. This is a safe-cache copy of the original web site.