Other JavaScript Libraries - Beginning JavaScript - page 524

Next, you determine the type of event that took place. You first check for mouseover and mouseout
events:
if (type == "mouseover" || type == "mouseout") {
target.toggleClassName("tabStrip-tab-hover");
If either of these events takes place, you want to toggle the tabStrip‐tab‐hover CSS class. For
mouseover events, this CSS class is applied to the target element, and for mouseout , the class is
removed.
Now you need to determine if the click event fired:
} else if (type == "click") {
target.addClassName("tabStrip-tab-click");
If so, you add the tabStrip‐tab‐click CSS class to the target element to change its style to that of a
clicked tab. Then, you need to get the tab's number from the element's data‐tab‐number attribute:
var num = target.getAttribute("data-tab-number");
showDescription(num);
}
}
You use the native getAttribute() method to retrieve that attribute's value and pass it to
showDescription() .
As you know, the showDescription() function adds the tab's description to the page.
function showDescription(num) {
var text = "Description for Tab " + num;
$("descContainer").update(text);
}
Here, you select the element representing the description container and replace its contents with the
update() method.
The final bit of code sets up the event listeners for the tab elements. Using the $$() function, you
retrieve them using the .tabStrip > div selector:
$$(".tabStrip > div").forEach(function (element) {
element.observe("mouseover", handleEvent);
element.observe("mouseout", handleEvent);
element.observe("click", handleEvent);
});
You use the Array object's forEach() method to iterate over the array returned by $$() . The function
you pass to forEach() is responsible for registering the mouseover , mouseout , and click event listeners
on each element, and you register those events using the observe() extension method.
Prototype isn't just about DOM manipulation and language enhancement. It, too, provides you with
Ajax capabilities that are easy to learn and use.