Tabs plugin update: Support for (unobtrusive) Ajax
February 5th, 2007
- Category:
- JavaScript,
- Web Development,
- jQuery
I have updated the Tabs plugin the other day. It now supports loading tab
content via Ajax. As one could have expected I did that in an unobtrusive manner.
The HTML you need is slightly different from the one that is used for static tabs: A list of links pointing to existing ressources (from where the content gets loaded) and no additional containers at all (unobtrusive!). They’re going to be created on the fly:
<div id="container">
<ul>
<li><a href="ahah_1.html">Content 1</a></li>
<li><a href="ahah_2.html">Content 2</a></li>
<li><a href="ahah_3.html">Content 3</a></li>
</ul>
</div>Initialize the tabs interface with the remote option set to true:
$('#container').tabs({remote: true});Obviously this will degrade gracefully – the links, e.g. the content, will still be accessible with JavaScript disabled.
All other options and history support should be totally unaffected by that.
There’s another option: While the tab content is being loaded a little spinner left to the tab title text is shown (which you will hardly see on the demo, because it’s loading too fast). Just like in Firefox for example. This is controlled by a CSS class, which you can change:
$('#container').tabs({remote: true, loadingClass: 'progress'});If you don’t want to show a spinner at all just remove the rule
.anchors .tabs-selected .tabs-loading {
...
}from the style sheet.