Mootools
26 de June, 2007
Mootools 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
. 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”
Deja tu comentario
El blog funciona con Wordpress y Simpla theme

August 23, 2007 a las 10:38 am
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
August 23, 2007 a las 10:40 am
disculpa lo extenso….
August 23, 2007 a las 8:43 pm
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!
August 23, 2007 a las 9:03 pm
excelente… no se me habia ocurrido eso… genial… ahora
como hago eso… tratare de hacerlo… gracias.
August 27, 2007 a las 1:29 pm
Hola federico ya logre hacer lo que deseaba con tu ayuda claro. gracias..
August 27, 2007 a las 1:33 pm
Ey, me alegro!
Saludos
August 31, 2007 a las 11:42 am
Tengo un problema con IE con este script en mootools
este es el link
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
please y gracias de antemano…
August 31, 2007 a las 11:42 am
http://www.pannet.pa/temporal/aplafa/donde.html
September 1, 2007 a las 9:34 pm
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
September 4, 2007 a las 9:54 am
muchas gracias… y disculpa las molestias…
September 4, 2007 a las 10:01 am
Ey, que ya eres amigo de la casa
Espero que te sirva, exitos
September 4, 2007 a las 8:50 pm
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…
September 4, 2007 a las 9:32 pm
Me alegro que te haya servido Arcadio. Lo probaste en IE7? porque yo lo probe en ie6, opera y firefox 2.x.
Saludos
January 11, 2008 a las 8:11 am
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?
February 26, 2009 a las 8:54 am
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.
January 15, 2010 a las 1:05 am
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});
}