Testing a MooTools Class

Simple example of extending a class, and adding more tests to it.

HTML

<p>Open the console to view failed / passed tests.</p>
<div id=fixture>
    <span id=child>child</span>
</div>
<br>
<p><a id="mienlace" href="http://ryanflorence.com/mootools-class/" target="_top">Part of this article</a></p>

CSS

p { margin: 1em 0; }

span {
    background: #eee;
    padding: 4px 8px;
    border-bottom: solid 4px #fff;
    cursor: pointer;
}
.current {
    border-color: #e00
}

.hover {
    background: #ccc;
}

JavaScript

$("mienlace").addEvent('mouseover', function() {
   this.set("style", "background-color: #ff8800;");
}.bind($("mienlace"))
);

$("mienlace").addEvent('mouseout', function() {
   this.set("style", "background-color: #A9F5BC;");
}.bind($("mienlace"))
); 

$("mienlace").addEvent('click', function() {
   this.set("style", "background-color: #F79F81;");
}.bind($("mienlace"))
);