[jQuery] $.tabs - plugin for accessible, unobtrusive tabs
Hi jQuerians,
I started to write a little plugin today for easily creating an
unobtrusive javascript tabs navigation, i.e. fully accessible with JS
turned off...
Here's a demo:
http://stilbuero.de/demo/jquery/tabs.html
I called the function $.tabs (better ideas anyone?). All you need to do
is pass that function the id of an element, that holds the elements to
be "tabified":
$.tabs("container");
So far it relies on HTML that has to look like this:
<div id="container">
<ul>
<li><a href="#section-1">A tab</a></li>
...
</ul>
<div id="section-1">
...
</div>
...
</div>
So that without JavaScript, you have a pretty normal list with anchors
pointing to each section.
By default the first tab is highlighted, but you can define the tab to
be highlighted first as an optional second parameter (human readable
index ;-)):
$.tabs("container", 2);
What do you think? If you're interested I could work a little more on
it, add effects and so on...
Here's the code:
$.tabs = function(containerId, start) {
var i = (typeof start == "number" && start > 0) ? start - 1 : 0;
$("[@id='" + containerId + "']/div:lt(" + i + ")").add("[@id='" +
containerId + "']/div:gt(" + i + ")").hide();
// Optional
$("[@id='" + containerId + "']/ul/li:nth-child(" + i +
")").addClass("on");
$("[@id=" + containerId + "]/ul/li/a").click(function() {
if (!$(this.parentNode).is(".on")) {
$("[@id='" + containerId + "']/div:visible").hide();
var re = /([\-\w]+$)/i;
var target = re.exec(this.href);
$("[@id='" + target[1] + "']").show();
$("[@id='" + containerId + "']/ul/li").each(function() {
this.className = "";
});
$(this.parentNode).addClass("on");
}
return false;
});
};
Happy coding,
Klaus
--
___________________________________
Dipl.-Ing. Klaus Hartl
Email office@stilbuero.de
Sredzkistraße 20, 10435 Berlin
http://www.stilbuero.de
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/