File: //opt/cpanel/ea-php54/root/usr/share/doc/pear/HTML_AJAX/examples/tests/test_behavior.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
How to use behavior.js
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="../server.php?client=behavior" type="text/javascript"></script>
<script type="text/javascript">
Behavior.register(
".alert",
function(element) {
element.onclick = function(){
alert('I alert on click');
}
}
);
Behavior.register(
".annoy",
function(element) {
element.onmouseout = function(){
alert('I alert on mouseout, very annoying');
}
}
);
Behavior.register(
".red",
function(element) {
element.onmouseover = function(){
element.style.backgroundColor = 'red';
}
}
);
</script>
</head>
<body>
<p>
This file requires two javascript files to work properly. They are behavior.js and css-Query-p.js and can be found in the js/behaviors folder.
The script allows you to apply behaviors to a css class, so you don't pollute your html with a ton of
inline javascript. The example below uses the following script tag to apply the behaviors.
you can also link external javascript files to apply behaviors as well.
</p>
<pre>
Behavior.register(
".alert",
function(element) {
element.onclick = function(){
alert('I alert on click');
}
}
);
Behavior.register(
".annoy",
function(element) {
element.onmouseout = function(){
alert('I alert on mouseout, very annoying');
}
}
);
Behavior.register(
".red",
function(element) {
element.onmouseover = function(){
element.style.backgroundColor = 'red';
}
}
);
</pre>
<div style="border: 1px solid black; width: 50%; margin: 5em">
<div class="alert">
I am a div that alerts when you click on me - notice I just have class="alert" to make it work :)
</div>
<div class="annoy">
I am a div that alerts when you mouseout me - class="annoy" makes it work
</div>
<div class=" alert red">
I am a div that alerts when you click on me and the background turns red on mouseover - class="alert red"
</div>
</div>
</body>
</html>