MooTools-made-it-easy-for-you-to-extend-any-native-object-like-Arrays-Strings-etc-to-add-the-functionality-you-want

Mootools JavaScript DHTML


            



  
  
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;
}  
  
  
  
  
// 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']);
  });
});  
  
  Extending Native Demo


  Extending the Native Objects

  Introduction

  
    There are times you may ask yourself "Why isn't that 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.
  

  
    For that reason MooTools made it easy for you to extend any native object like Arrays, Strings etc. to add the
    functionality you want.
  

  
    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.
  

  
  Execute Example

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;
  }

});