HTML and CSS Reference
In-Depth Information
Listing 9.13
Compact jQuery tabbed panels
jQuery.fn.tabs = function () {
jQuery(this).
addClass("js-tabs").
find("> ol:first a").
live("click", function () {
var a = jQuery(this);
a.parents("ol").find("a").removeClass("active-tab");
a.addClass("active-tab");
jQuery("[name="+this.href.replace(/^.*#/, "") + "]").
parents("div").
addClass("active-panel").
siblings("div.section").
removeClass("active-panel");
});
return this;
};
In this chapter we have discussed the principles of unobtrusive JavaScript and how
they can help implement websites using progressive enhancement. A particularly
obtrusive implementation of tabbed panels served to shed some light on the prob-
lems caused by making too many assumptions when coding for the client.
Unobtrusive JavaScript describes clean code the JavaScript way, including stay-
ing clean in its interaction with its surroundings, which on the web must be assumed
to be highly unstable and unpredictable.
To show how unobtrusive code can be implemented to increase accessibility
potential, lower error rates, and provide a more maintainable solution, we snuck
a peek into a test-driven development session that culminated in an unobtrusive
tabbed panel that works in browsers as old as Internet Explorer 5.0, uses no external
library, and disables itself gracefully in unsupporting environments.
In Chapter 10,
Feature Detection,
we will take the concept of making no as-
sumptions even further, and formalize some of the tests we used in this chapter as
we dive into feature detection, an important part of unobtrusive JavaScript.
