Java Reference
In-Depth Information
tab strip needs to respond to the
mouseover
,
mouseout
, and
click
events on the
<div/>
elements inside
of the tab strip. jQuery makes it extremely easy to register event listeners on these
<div/>
elements for
the desired events:
$(".tabStrip > div").on("mouseover mouseout click", handleEvent);
This code selects all “tab elements” in the document with jQuery's
$()
function and uses the
on()
method to register the
mouseover
,
mouseout
, and
click
event listeners on those elements.
jQuery code aside, this approach is different from the original. Here, the event listeners are on the
<div/>
elements themselves as opposed to
document
. This will simplify the
handleEvent()
function.
Let's look at that now.
The first two lines of
handleEvent()
do two things. The first line wraps a
jQuery
object around the
event target, and the second gets the type of event that occurred:
function handleEvent(e) {
var target = $(e.target);
var type = e.type;
In the original version of this code, you used both the event type and the target's CSS class to
determine which new CSS class you assigned to the element's
className
property. In this new version,
you only need to know the event type. For
mouseover
and
mouseout
events, you simply toggle the
tabStrip‐tab‐hover
class:
if (type == "mouseover" || type == "mouseout") {
target.toggleClass("tabStrip-tab-hover");
}
But for
click
events, your new code closely resembles the original's. First, you add the
tabStrip‐tab‐click
class to the element using jQuery's
addClass()
method:
else if (type == "click") {
target.addClass("tabStrip-tab-click");
var num = target.attr("data-tab-number");
showDescription(num);
}
Then you get the value of the
data‐tab‐number
attribute. You could optionally use jQuery's
data()
method to do the same thing by passing it the attribute name without
data‐
, like this:
data("tab‐number")
.
Once you have the tab's number, you pass it on to
showDescription()
. This function did not change
much; it simply uses jQuery's API to accomplish its task:
function showDescription(num) {
var text = "Description for Tab " + num;
$("#descContainer").text(text);
}
