Java Reference
In-Depth Information
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 = e.target.addClass("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">
<head>
<title>Chapter 17: Example 6</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 {
