Java Reference
In-Depth Information
MooTools passes its Event object to this function. One property of this object is the target property.
Exactly like the W3C event model's Event object, it contains the element that caused the event. You pass
the target to the dollar method to add MooTools' extensions and save the resulting extended Element
object to the el variable.
Next you check what type of event took place. In this case, you're primarily interested in mouseover
and mouseout events.
if (e.type == “mouseover” || e.type == “mouseout”)
{
if (el.hasClass(“tabStrip-tab”) &&
!el.hasClass(“tabStrip-tab-click”))
{
el.toggleClass(“tabStrip-tab-hover”);
}
}
In either case, you determine if the event target is a tab element by checking if it has the tabStrip-tab
CSS class. If so, and only if the tab doesn't have the tabStrip-tab-click class, you toggle the tab-
Strip-tab-hover class.
Next, you determine if a click event caused the event handler's execution, and you determine if the
event target is a tab with the tabStrip-tab-hover CSS class applied to it.
if (e.type == “click”)
{
if (el.hasClass(“tabStrip-tab-hover”))
{
If so, you retrieve the number associated with the tab and assign it to the num variable, as the following
code shows:
var id = el.id;
var num = id.substr(id.lastIndexOf(“-”) + 1);
The next step is to determine if the tab is currently the active tab. If it isn't, you deactivate the current
active tab.
if (currentNum != num)
{
deactivateTab();
Then you toggle the hover class off of the element while turning the click class on.
el.toggleClass(“tabStrip-tab-hover”)
.toggleClass(“tabStrip-tab-click”);
The fi nal steps of this function are to show the description for this newly clicked tab and store the value
contained in num to the currentNum variable.
showDescription(num);
currentNum = num;
}
}
}
}
Search WWH ::




Custom Search