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 »</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>Muy, pero que muy elegante.
2 comentarios, 3 referencias
+
#