Java Reference
In-Depth Information
padding: 2px;
}
</style>
</head>
<body>
<div class="tabStrip">
<div data-tab-number="1" class="tabStrip-tab">Tab 1</div>
<div data-tab-number="2" class="tabStrip-tab">Tab 2</div>
<div data-tab-number="3" class="tabStrip-tab">Tab 3</div>
</div>
<div id="descContainer"></div>
<script src="prototype.1.7.2.js"></script>
<script>
function handleEvent(e) {
var target = e.element();
var type = e.type;
if (type == "mouseover" ││ type == "mouseout") {
target.toggleClassName("tabStrip-tab-hover");
} else if (type == "click") {
target.addClassName("tabStrip-tab-click");
var num = target.getAttribute("data-tab-number");
showDescription(num);
}
}
function showDescription(num) {
var text = "Description for Tab " + num;
$("descContainer").update(text);
}
$$(".tabStrip > div").forEach(function(element) {
element.observe("mouseover", handleEvent);
element.observe("mouseout", handleEvent);
element.observe("click", handleEvent);
});
</script>
</body>
</html>
examples/ch17 _ example3.html
). Y
ou'll notice it behaves the same as the other tab strip scripts.
Because the CSS and markup remains unchanged in the jQuery version, let's focus on the JavaScript
that changed—starting with the
handleEvent()
function:
function handleEvent(e) {
var target = e.element();
Here, you get the event target using the
element()
extension method and assign it to the
target
variable.
