Java Reference
In-Depth Information
the
element()
method to retrieve the target of the
click
event and toggles the
class‐one
CSS class:
function divClick(e) {
var target = e.element();
target.toggleClassName("class-one");
}
$("myDiv").observe("click", divClick);
The element returned by the
element()
method is already extended with Prototype's methods; so,
there's no need to pass it to
$()
to get the extra functionality.
rewriting the tab strip with prototype
You now know how to retrieve and manipulate elements, add and remove elements, and register event
listeners with Prototype. Let's adapt the jQuery version of the tab strip from
ch16 _ example2.html
.
revisiting the toolbar with prototype
trY it out
Open your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 17: Example 3</title>
<style>
.tabStrip {
background-color: #E4E2D5;
padding: 3px;
height: 22px;
}
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
}
.tabStrip-tab {
padding: 3px;
}
.tabStrip-tab-hover {
border: 1px solid #316AC5;
background-color: #C1D2EE;
padding: 2px;
}
.tabStrip-tab-click {
border: 1px solid #facc5a;
background-color: #f9e391;
