<!--
MooTools is released under the Open Source MIT license,
which gives you the possibility to use it and modify
it in every circumstance.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div.element {
width: 100px;
height: 50px;
border: 1px solid black;
background-color: #f9f9f9;
float: left;
margin: 5px;
}
div.otherElement {
height: 20px;
}
pre {
padding: 5px 7px;
margin: 5px 0;
background: #f5f5f5;
border: 1px solid #ddd;
color: #333;
overflow: auto;
font-size: 12px;
}
h3.code {
margin: 10px 0;
padding: 3px 5px 1px;
background: #D0C8C8;
color: #5d4f4f;
}
p.margin {
margin: 5px 0;
}
</style>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// We add the "invoke"-Method to Arrays
Array.implement({
invoke: function(fn, args){
var result = [];
for (var i = 0, l = this.length; i < l; i++){
if(this[i] && this[i][fn])
result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
}
return result;
}
});
window.addEvent("domready", function(){
var els = $$("div.element");
var myArray = [
new Fx.Tween(els[0]),
new Fx.Tween(els[1]),
new Fx.Tween(els[2]),
new Fx.Tween(els[3]),
];
var i = false;
$("link").addEvent("click", function(e){
e.stop();
i = !i;
myArray.invoke("start", ["height", i ? "120px" : "50px"]);
});
});
</script>
<title>Extending Native Demo</title>
</head>
<body>
<h1>Extending the Native Objects</h1>
<h2>Introduction</h2>
<p>
There are times you may ask yourself "Why isn"t <span style="font-style: italic;">that</span> part of MooTools?" and while
there are possibly a lot of answers to that it simply could be that it is something with only small usage.
</p>
<p class="margin">
For that reason MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the
functionality you want.
</p>
<p class="margin">
In this example you will learn how to extend the Array-Object with a custom function. For this we
create an Array with Fx.Tween instances and start the effect on all Array elements. You may need
to have a look at the source of this demo.
</p>
<a id="link" href="#">Execute Example</a>
<div class="element"></div>
<div class="element"></div>
<div class="element otherElement"></div>
<div class="element otherElement"></div>
<div style="clear: both;"></div>
<div class="help">
<strong>Why?</strong> Via the newly added method we do not have to loop through the Array with
Array.each to just start the same method with same arguments on all the elements in the
given Array. If you need that functionality more often it is better to just add another method
to the Native then creating pointless functions or writing the same code again and again.
You should get the idea!
</div>
<h3 class="code">Code:</h3>
<pre>Array.implement({
invoke: function(fn, args){
var result = [];
for (var i = 0, l = this.length; i < l; i++){
if(this[i] && this[i][fn])
result.push(args ? this[i][fn].pass(args, this[i])() : this[i][fn]());
}
return result;
}
});</pre>
<h3 class="code">Usage:</h3>
<pre>myArray.invoke("fn", args);</pre>
</body>
</html>