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.