Mootools

26 de June, 2007

MootoolsMootools es un framework javascript orientado a objetos que agrupa gran cantidad de herramientas y plugins para facilitarle la vida a todos aquellos que a diario deben lidiar con efectos CSS, AJAX, JSON, etc sobre los diferentes navegadores e intentos de navegadores. Va por su versión 1.11 y al día de hoy, como decía mas arriba, acumula muchísimas herramientas y plugins realizados por una gran comunidad que se está formando de a poco.

La librería completa, incluyendo plugins y todo, pesa solo 42kb comprimida… pero dado que nos permiten descargar solo los componentes que vamos a utilizar, podemos hacerla adelgazar hasta 22kb sin perder sus herramientas mas importantes.

Vamos a lo divertido!

Y como lo divertido son los ejemplos, allá vamos. Uno de los últimos agregados que le hicieron al sitio de mootools fue una sección exclusiva para los ejemplos y sus respectivos códigos. Algunos de los ejemplos:

* Accordion
* AJAX.Form
* Drag.Cart
* Fx.Elements
* Fx.Morph
* Fx.Slide
* Json.Remote
* Slider
* Tips

Otros sitios con ejemplos y nuevos scripts

Mootools Link List
Sitio especialmente desarrollado para acumular enlaces a artículos, ejemplos y nuevos scripts.

Clientside.CNET
Aquí podrán encontrar multitud de ejemplos y tutoriales, además de una extensión de mootools con muchas nuevas utilidades.

¿Cuanto cuesta?¿debo llenar mi sitio con links powered by…?

Es gratis, y nada de links… salvo que te hagas un fanático como yo :P . Se distribuye bajo la licencia MIT.

Perfecto, ¿pero como aprendo a utilizar todo esto?

Si solo deseas aplicar algunos efectos no hay mucho para aprender, te bastará con tener algunos conocimientos de HTML/CSS y ganas de ir probando, puedes empezar a jugar con los ejemplos y luego te darás cuanta de lo sencillo que es ir adaptandolos a tus necesidades.

La sintaxis de que cada parte de la librería es por demás sencilla e intuitiva, no obstante siempre hace falta un ayuda memoria y para eso existe la documentación oficial. Si no te basta, en CNET podrás encontrar el Mootutorial, un completo tutorial desde 0 y en nuestro queridísimo Google podrás encontrar todo lo demás.

Mayormente, los ejemplos, tutoriales y hasta la documentación misma están en inglés, pero ya estan surgiendo traducciones al castellano.

¿Vale la pena?

La respuesta es un si rotundo. Rápidamente lograrás ambientarte a la sintaxis de la librería y no querras cambiarla. Mootools es una de esas cosas con las que te dan ganas de jugar, inventar y lo mas importante, trabajar.

Bajate Mootools y empezá a crear!

Otros artículos

16 comentarios en “Mootools”

  1. Arcadio Dijo:

    hola federico, nuevamente yo, tengo una pequeña consulta, bueno lo que sucede es que tengo varios divs a los cuales cuando le doy clic hago un togle, peeero como son varios, quisas el usuario no halla cerrado el anterior, y lo que sucede que sale al final del anterior, te pongo el codigo que hace el toogle, horita solo lo tengo con 2 divs, pero son como 7 :S, asi ke al darle clic a 1 y si hay otro abierto lo cierre con un toogle y abra el que le di clic,
    codigo de moo
    window.addEvent('domready', function() {
    var mySlide1 = new Fx.Slide('prueba').hide();
    var mySlide2 = new Fx.Slide('prueba2').hide();

    $('chiriqui').addEvent('click', function(e){
    e = new Event(e);
    if(mySlide1.open){
    mySlide1.options.transition = Fx.Transitions['Back']['easeIn'];
    }else{
    mySlide1.options.transition = Fx.Transitions['Back']['easeOut'];
    }
    mySlide1.toggle();
    e.stop();
    });

    $('panama').addEvent('click', function(e){
    e = new Event(e);
    if(mySlide2.open){
    mySlide1.options.transition = Fx.Transitions['Back']['easeIn'];
    }else{
    mySlide2.options.transition = Fx.Transitions['Back']['easeOut'];
    }
    mySlide2.toggle();
    e.stop();
    });
    })

    mi idea es hacer un if para preguntar si esta abierto y hacerle un hide… pero queria saber si habia alguna forma mas bonita de hacer eso :D

  2. Arcadio Dijo:

    disculpa lo extenso….

  3. Federico Dijo:

    Hola Arcadio, como estas?

    Mira, se me ocurre que podrías guardar en una variable cual es el elemento que abres. Entonces, cada vez que abres una elemento, guardas en la variable “anterior” el elemento…. pero antes cierras el elemento que ya venia en la variable “anterior”. Asi, antes de abrir cada elemento se cerrara el anterior.

    Espero que te sea de ayuda.

    Saludos!

  4. Arcadio Dijo:

    excelente… no se me habia ocurrido eso… genial… ahora :D como hago eso… tratare de hacerlo… gracias.

  5. Arcadio Dijo:

    Hola federico ya logre hacer lo que deseaba con tu ayuda claro. gracias..

  6. Federico Dijo:

    Ey, me alegro!

    Saludos

  7. Arcadio Dijo:

    Tengo un problema con IE con este script en mootools
    cuando le doy clic en el mapa, debe desaparecer el que estaba y abrir al que le di clic, en firefox lo hace bien perfecto, pero en IE no lo hace como debe, funciona extraño.. quisiera saber si me podrias revisar ese codigo a ver k hice mal :( este es el link
    please y gracias de antemano…

  8. Arcadio Dijo:

    http://www.pannet.pa/temporal/aplafa/donde.html

  9. Federico Dijo:

    Hola Arcadio, no tengo ie7 a mano, pero lo probe en el 6 y directamente no funciona, arroja un error. Le eche una mirada asi por encima y no encontre el error, de todos modos hice un ejemplo que quizas te sirva. Si no soluciona tu problema, recuerda darte una vuelta por el foro ya hay bastante gente dando ayuda (tambien lo intento).

    Saludos

  10. Arcadio Dijo:

    muchas gracias… y disculpa las molestias…

  11. Federico Dijo:

    Ey, que ya eres amigo de la casa ;-)

    Espero que te sirva, exitos

  12. Arcadio Dijo:

    perfecto kedo….. ke va hice codigo de mas… mas simplificado ke eso no existe… gracias por el ejemplo… y espero que le sirva a las demas personas que entren por aki…

  13. Federico Dijo:

    Me alegro que te haya servido Arcadio. Lo probaste en IE7? porque yo lo probe en ie6, opera y firefox 2.x.

    Saludos

  14. jorge Dijo:

    hola Federico, he realizado un ejemplo similar al tuyo pero tengo un problema que es que cuando pincho en los enlaces, hace el efecto toggle pero luego me redirige a la home de mi web, esto es porque aparece la en el link del enlace lo siguiente : http://www.midominio.es/# en lugar de http://www.midominio.es/pagina-de-prueba/# que es donde tengo el ejemplo de prueba. Te suena de algo el por qué no pone la url desde donde estoy ejecutando el ejemplo?

  15. David Bernad Dijo:

    Hola a todos.
    Lo primero, muy bueno el artículo.
    Escribo este comentario para preguntar una duda que ya ha sido realizada pero la respuesta no me es útil. Querría saber qué elemento del acordeón está abierto, pero no me sirve lo de la variable por las características de mi sitio web, y necesito conocer una forma de saber cuál es el que está abierto.

    La persona que lo preguntó era para poder cerrar el que estaba abierto antes de abrir otro. Eso se puede hacer con una variable del Accordion, “alwayshide = true”, pero yo necesito saberlo por otro tema.

    Si alguien lo supiera y me lo dijera se lo agradecería muchísimo.

    Gracias de antemano.

    Un saludo.

  16. Edgar Dijo:

    hola, saludos a todos

    Tengo un problema con la clase Fx.Slide, pasa que quiero que cuando inicie la pagina este oculto el div al que le aplicare el slide algo asi

    window.addEvent(‘domready’, function(){
    var slide1 = new Fx.Slide(‘div_motivo’);
    slide1.hide();
    });

    el problema es que las funcionesslideIn()y slideOut() las debo aplicar en otra funcion de consulta ajax que dependiendo de la respuesta es lo que aplicara, y si estas las saco de window.addEvent(‘domready’, function(){ no funcionan, el codigo es el siguiente


    function Busca(){
    var jsonRequest = new Request.JSON({url:”Busca.php”, onSuccess: function(resp){
    if(resp.Error){
    alert(resp.Error);
    slide1.slideOut(); <—-
    return;
    }else{
    $('txt_fecreg').value=resp.Fecha;
    $('txt_fol').value=resp.Folio;
    $('txt_lib').value=resp.NumLibro;
    $('txt_foja').value=resp.NumFoja;
    $('txt_reg').value=resp.NumReg;
    $('txt_ctrl').className='';
    slide1.slideIn(); <—-
    return;
    }
    }}).post({'NoControl':$('txt_ctrl').value});
    }

Deja tu comentario

XHTML: Puedes usar estos tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">

El blog funciona con Wordpress y Simpla theme