Primeros ejemplos de uso de MooTools

heySilver / BlogoEdad / Themes en Español / WikiNovela / iMeneame / geekTest / WpAdminThemes

Martes ~ Septiembre 12, 2006

Primeros ejemplos de uso de MooTools

La gente parece que ha acogido a MooTools con los brazos abiertos, y alguno con más tiempo libre que yo se ha permitido trastear un poco las novedades que incorpora.

Mejoras

Una de las mejoras más útiles quizas sea la utilización del método extend() que nos muestra Ismael de EstadoBeta, con la cual podemos extender nuestras clases de una forma mucho más cómoda que en prototype (Ismael te cojo prestado el código)

Prototype

var Mamifero = Class.create();
Mamifero.prototype = {
    initialize:function(){
        alert(”Soy un mamifero”);
    }
}
//Gato extiende Mamifero
var Gato = Class.create();
Object.extend( Object.extend(Gato.prorotype, Mamifero.prototype), {
    initialize:function(){
        alert(”Soy un gato”);
    }
});

MooTools

var Mamifero = new Class({
    initialize: function(){
        alert("Soy un mamifero");
    }
});
//Gato extiende Mamifero
var Gato = Mamifero.extend({
    initialize: function(){
        this.parent();
        alert(”Soy un Gato”);
    }
});

La funcionalidad es la misma, extender la clase Gato con la superclase Mamifero, pero la claridad y simplicidad es abismal.

Ejemplo de Drag & Drop

En Snook han hecho un ejemplo de Drag & Drop usando como librería mootools únicamente, y la verdad es que es muy cómodo y facil de implementar. Nada de mil funciones para controlar todos los eventos posibles.

Javascript


   var draggableOptions = {
      onStart:function()
      {
        this.el.setOpacity(.5);
      },
      onComplete:function()
      {
        // put the element back where it belongs
        this.el.setOpacity(1);
        this.el.style.left = 0;
        this.el.style.top = 0;
      }
  };

  var droppableOptions = {
      onOver:function(){
          this.addClassName('dragover');
      },
      onLeave:function(){
        this.removeClassName('dragover');
      },
      onDrop:function(){
        this.addClassName('dropped');
        this.innerHTML = 'dropped';
      }
  }

  window.onload=function()
  {
    var dropitems = document.getElementsBySelector('.item'); //Declaramos los elementos recipientes
    dropitems.each(function(drop){ drop.extend(droppableOptions)   });
    draggableOptions.droppables = dropitems;
    $('dragger').addClassName('drag').makeDraggable(draggableOptions); //El objeto que moveremos a los recipientes

  }

HTML


<body>
  <h1>Mootools Drag and Drop example</h1>
  <p><a href=“http://www.snook.ca/archives/javascript/mootools_drag_a/”>See related post &raquo;</a></p>
  <div id=“dragger”>Drag me</div>
  <div class=“item”>Item 1</div><div class=“item”>Item 2</div><div class=“item”>Item 3</div><div class=“item”>Item 4</div>
</body>