Unobtrusive JavaScript - Test-Driven JavaScript Development - page 193

Listing 9.10 Using the tab controller

(function () {
if (typeof document == "undefined" ||

!document.getElementById) {
return;

}

var dom = tddjs.dom;
var ol = document.getElementById("news-tabs");

/* ... */

try {
var controller = tddjs.ui.tabController.create(ol);
dom.addClassName(ol.parentNode, "js-tabs");

controller.onTabChange = function (curr, prev) {
dom.removeClassName(getPanel(prev), "active-panel");
dom.addClassName(getPanel(curr), "active-panel");

};

controller.activateTab(ol.getElementsByTagName("a")[0]);
} catch (e) {}
}());

The getPanel function used in the above example uses the semantic markup
to find which panel an anchor should toggle. It extracts the part of the anchor's href
attribute after the hash character, looks up elements with corresponding names, and
finally picks the first one it finds. It then traverses the element's parent until it finds
a div element. The method can be seen in Listing 9.11.

Listing 9.11 Finding the panel to toggle

(function () {
/* ... */

function getPanel(element) {
if (!element || typeof element.href != "string") {

return null;

}

var target = element.href.replace(/.*#/, "");
var panel = document.getElementsByName(target)[0];