Java Reference
In-Depth Information
This code is also different from the original version of the script. In the original version, you checked
for the mouseover and mouseout events separately. You don't have to do that with this new version due
to the CSS design change.
You do, however, still need to determine if the element has the
tabStrip-tab
CSS class as one of its
classes to make sure this particular element is a tab in the tab strip. Since the
handleEvent()
function
handles the
mouseover
,
mouseout
, and
mouseclick
events of the document object, these events can
fi re off any element in the page. You want to make sure the element that caused the event to fi re is, in
fact, a tab, and you can do so by seeing if the element has the
tabStrip-tab
CSS class applied to it.
You also want to ensure that the element doesn't have the tabStrip-tab-click CSS class, either.
Otherwise, the jQuery toggleClass() method will actually add the tabStrip-tab-hover CSS
class when you move your mouse out of an element with the click class applied. So by making
sure the tabStrip-tab-click class isn't applied to the element, you can be sure that the tabStrip-
tab-hover class will be toggled correctly; it'll be added when you move your mouse pointer over the
element, and it will be removed when your pointer leaves the element.
Now look at what happens when you click your mouse on a tab.
if (e.type == “click”)
{
if (el.hasClass(“tabStrip-tab-hover”))
{
var id = e.target.id;
var num = id.substr(id.lastIndexOf(“-”) + 1);
if (currentNum != num)
{
deactivateTab();
Not much new happens here. A new variable, id, is declared and assigned the event target's id. This
change is primarily a convenience, as id is easier to type than e.target.id. The next lines are relatively
the same:
el.toggleClass(“tabStrip-tab-hover”)
.toggleClass(“tabStrip-tab-click”);
showDescription(num);
currentNum = num;
}
}
}
The only thing different here is the change to use jQuery's
toggleClass()
method two times. The
fi rst
toggleClass()
call removes the
tabStrip-tab-hover
CSS class, and the second call adds the
tabStrip-tab-click
CSS class to the element.
The code in showDescription() completely changed, even though it performs the same operations
of creating a <div/> element, giving it text, and appending it to the <div/> element with an id of
descContainer.
function showDescription(num)
{
var div = $(document.createElement(“div”));
$(“#descContainer”).append
(
