JavaScript Frameworks - Beginning JavaScript - page 583

Because of the similarities between Prototype and MooTools, the showDescription() function is very
similar to that of the Prototype version.
function showDescription(num)
{
var attributes = new Object();
attributes.id = “tabStrip-desc-” + num;
You fi rst create the attributes object, assigning the id property the value you want the new <div/>
element to have. Next, you create the <div/> element by calling the Element constructor and chaining
the appendText() method. You assign the returned value of appendText() , the Element object, to the
div variable.
var div = new Element(“div”, attributes)
.appendText(“Description for tab “ + num);
And lastly, at least for this function, you append the new element to the <div/> element with an id of
descContainer by using the adopt() method.
$(“descContainer”).adopt(div);
}
Unlike showDescription() , the deactivateTab() function resembles more of the jQuery version
than the Prototype version.
function deactivateTab()
{
var descEl = $(“tabStrip-desc-” + currentNum);
You fi rst get the <div/> element containing the currently active tab's description. This element may, or
may not, be in the DOM. In order to stave off errors, you need to check if the element was found or not.
The dollar function returns null if the element cannot be found, and null is a false-y value, so simply
use the descEl variable as the condition of the if statement.
if (descEl)
{
descEl.dispose();
$(“tabStrip-tab-” + currentNum)
.toggleClass(“tabStrip-tab-click”);
}
}
If the element is found, use the dispose() method to remove it from the DOM. Then retrieve the cur-
rently active tab <div/> element and remove the tabStrip-tab-click class with the toggleClass()
method.
Finally, register your event handler to handle the mouseover, mouseout, and click events.
var handlers = new Object();
handlers.mouseover = handleEvent;
handlers.mouseout = handleEvent;
handlers.click = handleEvent;
document.addEvents(handlers);