HTML and CSS Reference
In-Depth Information
Implementation, as seen in Listing 9.9, is fairly straightforward. As the tests
indicate, the method starts by checking that it actually received an element, and
that its tag name matches the
tabTagName
property. It then proceeds to add
and remove class names as described above, and finally calls the
onTabChange
method. Finally, we add a no-op
onTabChange
, ready for users to override.
Listing 9.9
The
activateTab
method
function activateTab(element) {
if (!element
||
!element.tagName
||
element.tagName.toLowerCase() != this.tabTagName) {
return;
}
var className = "active-tab";
dom.removeClassName(this.prevTab, className);
dom.addClassName(element, className);
var previous = this.prevTab;
this.prevTab = element;
this.onTabChange(element, previous);
}
tddjs.namespace("ui").tabController = {
/* ... */
activateTab: activateTab,
onTabChange: function (anchor, previous) {},
tabTagName: "a"
};
9.5.4 Using the Tab Controller
Using the
tabController
object we can recreate the tabbed panel in an unob-
trusive way. The improved panel will be based on the markup shown in Listing 9.2.
The script in Listing 9.10 grabs the
ol
element containing links to each section and
creates a tab controller with it. Doing so will cause the tabs to have the
active-
tab
class name toggled as we click them. We then hook into the tab controller's
onTabChange
callback and use the semantic relationship between the anchors
and the sections of information to toggle active state for panels, disabling the pre-
vious panel and enabling the current selected one. Finally, the first tab anchor is
fetched and activated.
