Archive for the “Mootools” category

Mootools vs jQuery

121st Oct 2011Javascript, Mootools, Recomiendo, Web

Este post es en parte para realizar una comparativa entre Mootools y jQuery…. Ambas son librerías de javascript que permiten hacer cosas como animar objetos, seleccionar elementos, etc. en cada página donde se ejecuten, es decir que en la práctica lo que hacen es entregarnos funciones pre-hechas para realizar las tareas de javascript y así permitir, entre otras cosas, simplicarnos la vida y compatibilizar los navegadores. Ambas sirven para lo mismo y de hecho funcionan de manera bastante similar.
Muchas personas no conocen Mootools y, como generalmente ven más sitios o ejemplos hechos en jQuery creen que “es mejor”,

Automatizar las frases por defecto en los campos de texto

329th Jun 2010Javascript, Mootools, Web

Imagino que más de alguna vez habrán visto los típicos campos de texto con alguna frase como “ingresa tu email aquí” y que cuando le hacen click esa frase desaparece por completo dejando el input vacío. Y lógicamente que cuando me salgo de boton vuelve la frase original.
Acá les dejo una forma automática de hacerlo, en javascript, por supuesto:

var inputs=$$('#formulario_de_contacto .text','#formulario_de_contacto textarea');
for(i=0;i<inputs.length;i++){
	inputs[i].txtOriginal=inputs[i].value;
	inputs[i].onfocus=function(){
		if(this.value==this.txtOriginal){ this.value=""; }
	}
	inputs[i].onblur=function(){
		if(this.value==""){ this.value=this.txtOriginal; }
	}
}
…

No hay mucho que explicar de este código: primero selecciona todos los textarea y elementos con la clase “text” (que es la que

Tutorial de Mootools: Animaciones simples

07th Mar 2010Javascript, Mootools, Tutoriales

En este segundo mini-tutorial, explicaré como comenzar a jugar con las animaciones que ofrece Mootools: fades y slides.
Lo bueno es que con esta librería es posible comenzar a hacer cosas con una simple línea o función, y luego podemos ir detallando y complejizando más nuestra animación. Ahora veremos como.
Otro de los beneficios que ofrece Mootools es la posibilidad de hacer animaciones de una manera muy simple. Este es un ejemplo (suponiendo que tenemos un DIV id=”div_animable”:

$('div_animable').slide('out');…

Este tipo de función se puede aplicar a cualquier objeto. Por ejemplo, si tenemos un botón, podríamos decirle que

Tutorial de Mootools: seleccionar objetos

47th Mar 2010Javascript, Mootools, Tutoriales

Este es uno de varios minitutoriales donde explicaré lo escencial de Mootools.
Está enfocado a ir aprendiendo funcionalidades específicas, que nos permitan comenzar a aprovechar esta excelente librería desde el primer momento.
En este caso, hablare acerca de como seleccionar objetos según su ID, o clase, para poder aplicar acciones específicas sobre ellos.
Porsupuesto, que lo primero que deberían hacer es bajar la librería Mootools…; crear una página para trabajar con ella y llamar al archivo dentro de la etiqueta HEAD para que esté disponible para usarse. Una vez hecho esto, veamos de que nos ofrece

Switch to our mobile site