En el post anterior hemos construido nuestra primera aplicación SPA la cual va cambiando de una vista a otra las cuales están todas precargadas.
Sin embargo la mayor parte de las aplicaciones móviles disponen de algún sistema de transición entre páginas que aporta mas vistosidad y también una información mas clara de cambio de vista.
Esta funcionalidad es la que vamos a desarrollar en este POST apoyandonos en el framework JQuery. En este caso realizar una primera aproximación no es complicado. Nos basta con cambiar los métodos hide() y show() por fadeIn() y fadeOut() así como algunos identificadores .
HTML
<body> <div id="pagina1"> <form action="Pagina2.jsp" id="formulario1"> <fieldset> <legend>Formulario Nombre</legend> <label for="nombre">Nombre:</label> <input type="text" name="nombre" /> <input type="submit" value="Aceptar" /> </fieldset> </form> </div> <div id="pagina2"> <form action="Pagina3.jsp" id="formulario2"> <fieldset> <legend>Formulario Apellidos</legend> <label for="apelidos">Apellidos:</label> <input type="text"name="apellidos" /> <input type="submit" value="Aceptar" /> </fieldset> </form> </div> <div id="pagina3"> <form action="Resultado.jsp" id="formulario3"> <fieldset> <legend>Edad</legend> <label for="edad">Edad:</label> <input type="text" name="edad" /> <input type="submit" value="Aceptar" /> </fieldset> </form> </div> <div id="destino">Pagina de destino</div> </body>
Javacript
$(document).ready(function() {
$("div").hide();
$("div:first").show();
$("#formulario1").submit(function() {
$("#pagina1").fadeOut(function() {
$("#pagina2").fadeIn();
});
return false;
});
$("#formulario2").submit(function() {
$("#pagina2").fadeOut(function() {
$("#pagina3").fadeIn();
});
return false;
});
$("#formulario3").submit(function() {
$("#pagina3").fadeOut(function() {
$("#destino").fadeIn();
});
return false;
});
});
Aunque el efecto funciona se producirá un efecto como de rebote .Esto se debe a que la transición de fadeOut() y fadeIn() se realizan de forma simultanea y no una y después la otra.Para que las transiciones se realicen de una forma correcta debemos apoyarnos en la función de callback que cada transición posee a nivel de JQuery de tal forma que hasta que no termine la primera la segunda transición no comenzará a ejecutarse.
$(document).ready(function() {
$("div").hide();
$("div:first").show();
$("#formulario1").submit(function() {
$("#pagina1").fadeOut(function() {
$("#pagina2").fadeIn();
});
return false;
});
$("#formulario2").submit(function() {
$("#pagina2").fadeOut(function() {
$("#pagina3").fadeIn();
});
return false;
});
$("#formulario3").submit(function() {
$("#pagina3").fadeOut(function() {
$("#destino").fadeIn();
});
return false;
});
});
Al diseñar arquitecturas SPA nos encontraremos con muchas situaciones de este estilo .En este caso hemos construido la transición con JQuery pero podríamos usar CSS 3 también.Estos temas los abordaremos en otros Post.
Hola, me parece muy interesante el blog y en cuanto tengo 5 minutos le voy echando un ojo a los post que tienes. En este en concreto creo que los dos codigos jquery son iguales, al menos no veo la diferencia jejeje.
Un saludo
Tienes razon esta repetido lo tendré que corregir ,gracias