Pedir presupuesto

Mensajes con un bonito efecto en formularios usando Mootools

Seguramente os habreis preguntado alguna vez ¿Cómo podriais hacer para que a un usuario le apareciera un mensaje con un “fade effect” durante algunos segundos al hacer un submit en un formulario.

 

Los pasos serían los siguientes:

  1. Submitir un formulario.
  2. Displayar un mensaje diciendo “Guardando …”
  3. Cuando la respuesta AJAX es completo, displayar “Guardado!” en el mensaje desapareciendo unos segundos mas tardes con un efecto fade-out. 

Y el mejor camino para realizar esto, es sin duda, usando MOOTOOLS ayudado con este tutorial e implementando una serie de lineas en Javascript.

 

Paso 1. Código HTML

El código HTML que usaremos es muy simple. Añadimos sólo los elementos esenciales:
 

         La ventana del mensaje

         Elemento input con un botón (con ID “save_button”), aunque puedes hacerlo lo complejo que quieras, añadiendo elementos.

 

 <div id=«box»></div>
<input name=«myinput» type=«text» /> <input id=«save_button» name=«save_button» type=«button» value=«save»/>



Paso 2. Código CSS

Puedes cambiar el estilo de tus menasjes cambiando los atributos que tu quieras:
 

#box {
margin-bottom:10px;
width: auto;
padding: 4px;
border: solid 1px #DEDEDE;
background: #FFFFCC;
display: none;
}

 

Recuerda inicializar el atributo display a “none”.  Así el mensaje aparecerá solo cuando el usuario submita el formulario.
 

Paso 3. Código Javascript

Copia este código dentro de la etiqueta <head> de la página:  

<script type=«text/javascript»>
window.addEvent(‘domready’, function(){
var box = $(‘box’);
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});

$(‘save_button’).addEvent(‘click’, function() {
box.style.display
=»block»;
box.setHTML
(‘Save in progress…’);

/* AJAX Request here… */

fx.start({
}).chain(function() {
box.setHTML
(‘Saved!’);
this.start.delay
(1000, this, {‘opacity’ : 0});
}).chain(function() {
box.style.display
=»none»;
this.start.delay
(0100, this, {‘opacity’ : 1});
});

});
});
</script>

 

Si nunca has usado Mootools, pero estas familiarizado con JavaScript, esta linea de código:

var box = $(‘box’);
 

… es lo mismo que decir:
 

var box = document.getElementById(‘box’);

 
Y la siguiente linea de código permite retardar 1000 ms (1 segundo) el aplicar el efecto fade-out:

 

this.start.delay(1000, this, {‘opacity’ : 0});

 
Y con esto hemos terminado este excelente tutorial.

 

Via:  woork

Enlace:  Este tutorial ha sido traducido directamente desde: http://woork.blogspot.com/2008/03/nice-ajax-effect-for-message-box-using.html

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

4 comentarios

  1. pues que le puedo contar nkzhsdfcnuhiryfsnhcrsucnhytjhgeuifvndjdtydhurydfhriegyr78yf7865rr78t568iu5789tyrd76griufgysr857kgitjugmumfjgmjfujfmfujdhj sera esto quien lo adivine es la mejor…………….. es una istoria muy limda

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es