Java Reference
In-Depth Information
Let's jump right into the code, starting with the
handleEvent()
function:
function handleEvent(e) {
var target = e.target;
var type = e.type;
Everything is standards‐compliant code until you get to the
if
statement; that's when you use
MooTools'
toggleClass()
method in the case of
mouseover
and
mouseout
events:
if (type == "mouseover" ││ type == "mouseout") {
target.toggleClass("tabStrip-tab-hover");
If it is one of these events, you add the
tabStrip‐tab‐hover
CSS class to the event target. But if the
event is a
click
event, you need to do a few things. First, you add the
tabStrip‐tab‐click
CSS class
to the element. Then, you get the value of the
data‐tab‐number
attribute because you'll need to pass
that to the
showDescription()
function:
} else if (type == "click") {
target.addClass("tabStrip-tab-click");
var num = target.getAttribute("data-tab-number");
showDescription(num);
}
}
The
showDescription()
function changed very slightly; in fact, just one statement needs your
attention:
function showDescription(num) {
var text = "Description for Tab " + num;
$("descContainer").set("html", text);
}
You need to change the content of the description container element. Now, you can do that in a variety
of ways, and as we mentioned earlier, the native
innerHTML
property would be ideal. However, for the
sake of this example, you use MooTools'
set()
method to set the virtual
html
property.
Finally, you register your listeners for the
mouseover
,
mouseout
, and
click
events:
$$(".tabStrip > div").addEvents({
mouseover: handleEvent,
mouseout: handleEvent,
click: handleEvent
});
Here, you use MooTools'
$$()
method to select the
<div/>
elements within the tab strip. Then you
use the
addEvents()
method to register the three event listeners. As an alternative, you could use the
technique demonstrated in the Prototype example:
$$(".tabStrip > div").forEach(function(item) {
item.addEvents({
