Java Reference
In-Depth Information
}
$(document).observe(“click”, handleEvent);
$(document).observe(“mouseover”, handleEvent);
$(document).observe(“mouseout”, handleEvent);
</script>
</head>
<body>
<div class=”tabStrip”>
<div id=”tabStrip-tab-1” class=”tabStrip-tab”>Tab 1</div>
<div id=”tabStrip-tab-2” class=”tabStrip-tab”>Tab 2</div>
<div id=”tabStrip-tab-3” class=”tabStrip-tab”>Tab 3</div>
</div>
<div id=”descContainer”></div>
</body>
</html>
Save this fi le as
ch15_examp5.htm
and load it into your browser. You'll notice it behaves the same as
Chapter 12's Question 2 answer, and as the rewritten version with jQuery.
Because the CSS and markup remains unchanged from ch15_examp3.htm (the jQuery version), you'll
focus on the JavaScript functions and how they changed, and you'll start with the handleEvent()
function.
function handleEvent(event)
{
var el = event.element();
The fi rst thing to notice about this function is the parameter's name being changed to
event
. You did this
for the purpose of calling the
element()
method. Had you used another name for the parameter, you
would need to determine the user's browser and call the
element()
method on the
window.event
object and the W3C event object. In other words, it would require more work from you, and look like
the cross-browser version in Chapter 12.
Next, you determine the type of event that took place. You fi rst check for mouseover and mouseout
events.
if (event.type == “mouseover” || event.type == “mouseout”)
{
if (el.hasClassName(“tabStrip-tab”) &&
!el.hasClassName(“tabStrip-tab-click”))
{
If either of these events take place, you have to check whether or not the element that fi red the event is
a tab in the tab strip. To do that, you determine if the element has the
tabStrip-tab
class name with
the
hasClassName()
method. You also need to make sure the element does not have the
tabStrip-
tab-click
class name. Failing to do so would result in improper style changes.
If the element meets all your requirements, then toggle the tabStrip-tab-hover class name.
el.toggleClassName(“tabStrip-tab-hover”);
}
}
