Java Reference
In-Depth Information
It's given an actual height of
28
pixels (height + top padding + bottom padding). This height and
padding vertically centers the tab
<div/>
elements within the tab strip.
The tabs have several CSS rules to define the way they are rendered in the browser because they have
three states: normal, hover, and click. Despite these three states, they are still tabs and thus share some
visual characteristics. The first rule dictates these shared properties:
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
}
The selector tells the browser to apply these properties to all
<div/>
elements inside the tab strip. The
elements are set to float left to give them an inline appearance (
<div/>
elements are block elements, and
appear on a new line by default).
The next rule, the
tabStrip‐tab
class, defines the normal state:
.tabStrip-tab {
padding: 3px;
}
All this rule adds is a padding of three pixels on all sides of the element. Next is the hover state, as
defined by the
tabStrip‐tab‐hover
class:
.tabStrip-tab-hover {
border: 1px solid #316AC5;
background-color: #C1D2EE;
padding: 2px;
}
This rule reduces the padding to two pixels, adds a one‐pixel‐wide border, and changes the background
color to a shade of blue. Borders, like padding, add to the actual dimensions of an element; reducing the
padding while adding a border keeps the element in a hover state, the same height and width as it was in
the normal state.
The final rule declares the
tabStrip‐tab‐click
class:
.tabStrip-tab-click {
border: 1px solid #facc5a;
background-color: #f9e391;
padding: 2px;
}
This class is similar to the hover class; the only difference is the dark orange border color and light
orange background color.
Now let's look at the JavaScript code that performs the magic. The code consists of the
handleEvent()
function, which is registered as the document object's
mouseover
,
mouseout
, and
click
event listeners:
