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:
- Submitir un formulario.
- Displayar un mensaje diciendo “Guardando …”
- Cuando
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.
<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
4 comentarios
Saludos! ¡La palabra «submitir» no pertenece al castellano! Submit tiene traducción y sentido en este ámbito.
Gracias por tu aportación pejimena.
No era mas que un jerga que se suele utilizar por internet al referirse al boton de tipo SUMBIT.
Saludos.
pues que le puedo contar nkzhsdfcnuhiryfsnhcrsucnhytjhgeuifvndjdtydhurydfhriegyr78yf7865rr78t568iu5789tyrd76griufgysr857kgitjugmumfjgmjfujfmfujdhj sera esto quien lo adivine es la mejor…………….. es una istoria muy limda
He probado pero me da problema cuando lo mezclo con Form.Validator.Inline, todavia no lo soluciono.