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) {
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.
Search WWH ::

Custom Search