Java Reference
In-Depth Information
you to layer styles on top of each other; so instead of changing an element's style completely with the
className property, you simply add or remove a layer of style. This reduces the amount of CSS you
have to write.
.tabStrip-tab
{
float: left;
font: 14px arial;
cursor: pointer;
padding: 2px;
border: 1px solid transparent;
}
.tabStrip-tab-hover
{
border-color: #316AC5;
background-color: #C1D2EE;
}
.tabStrip-tab-click
{
border-color: #facc5a;
background-color: #f9e391;
}
The fi rst notable change is the removal of the .tabStrip div selector, and its style properties were moved
to the tabStrip-tab class. The second change is that the tabStrip-tab class reduces the padding to two
pixels (down from three pixels), and adds a transparent one-pixel-width border. The fi nal CSS changes
were to the tabStrip-tab-hover and tabStrip-tab-click classes. Formerly, they added a border,
changed the background color, and reduced the padding to two pixels. Because tabStrip-tab now
applies its own border to the element, the hover and click classes only need to change the border and
background colors.
Now turn your attention to the JavaScript code. This version of the DHTML toolbar still incorporates
the use of the currentNum global variable to keep track of the active tab's number.
var currentNum = 0;
Next is the handleEvent() function. Remember in the original version you had to code for both the IE
and W3C DOM event models. You don't have to here!
function handleEvent(e)
{
var el = $(e.target);
All you need to do is create a jQuery object referencing the jQuery.Event.target property — the
element that caused the event to occur. Next, you determine if the mouse was moved over or out of
an element.
if (e.type == “mouseover” || e.type == “mouseout”)
{
if (el.hasClass(“tabStrip-tab”) && !el.hasClass(“tabStrip-tab-click”))
{
el.toggleClass(“tabStrip-tab-hover”);
}
}
Search WWH ::




Custom Search