Archive for the “Mootools” category

Automatizar las frases por defecto en los campos de texto

3Sebastian Barria • 29th Jun 2010 • Javascript, 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…

Tutorial de Mootools: Animaciones simples

0Sebastian Barria • 7th Mar 2010 • Javascript, 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 al hacerle…

Tutorial de Mootools: seleccionar objetos

3Sebastian Barria • 7th Mar 2010 • Javascript, 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 Mootools.

Seleccionar un objeto

…