Java Reference
In-Depth Information
Note  Visit fo r a
complete list of properties of MooTools' DOMEvent object.
For example, the following code registers a click event listener on an element with an id of myDiv :
function divClick(e) {
var target ="class-one");
alert("You clicked at X:" + e.client.x + " Y:" + e.client.y);
$("myDiv").addEvent("click", divClick);
When the click event fires, MooTools passes its own event object to divClick() . The first line of
the function calls the addClass() method, adding the class‐one CSS class to the element.
The addClass() method returns an extended element object, letting you both add the CSS class and
assign the target variable with the extended event target. You then use an alert box to display the
mouse pointer's coordinates by using the client.x and client.y properties.
rewriting the tab strip with mootools
Now that you've had a crash course in MooTools, let's rewrite the tab strip!
revisiting the toolbar with Mootools
trY it out
Open your text editor and type the following:
<!DOCTYPE html>
<html lang="en">
<title>Chapter 17: Example 6</title>
.tabStrip {
background-color: #E4E2D5;
padding: 3px;
height: 22px;
.tabStrip div {
float: left;
font: 14px arial;
cursor: pointer;
.tabStrip-tab {
padding: 3px;
.tabStrip-tab-hover {
Search WWH ::

Custom Search