All.
I have just updated the Tabs plugin, which now supports loading tab
content via Ajax. As you would expect I did that in an unobtrusive manner.
The only thing you need to do is to build the following HTML with links
to existing ressources (from where the content gets loaded):
<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>
And use the remote option:
$('#container').tabs({remote: true});
Obviously this will degrade gracefully, without JavaScript the content
will still be accessible.
All other options and history should be totally unaffected by that.
Because my MacBook is currently at the service provider I couldn't test
in Safari and a real (not a standalone) IE 7. Feedback appreciated.
There's another option: While the tab content is loading a little
spinner left to the tab title text gets 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 just remove
.anchors .tabs-selected .tabs-loading {
padding-left: 25px;
background-image: url(loading.gif);
background-position: 4px 50%;
background-repeat: no-repeat;
}
from CSS. Well, I just realized that I don't really need to put that
into the external style sheet.
So maybe I'm going to change this again, but let's see...:
$('#container').tabs({remote: true, spinner: 'loading.gif'});
$('#container').tabs({remote: true, spinner: false});
What do you think?
Demo as usual:
http://stilbuero.de/jquery/tabs/
I hope this fits your needs.
Cheers, Klaus
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
