Continuando con el mismo ejemplo de los anteriores posts, voy a explicar cómo lo he hecho yo para que, mientras se recarga un div, nos muestre un mensaje de que se está cargando. No es que sea necesario incluirlo pero sí conveniente. ¿Motivos?; los siguientes:
No es mi caso pero es posible que vosotros, para la petición de carga del siguiente div, uséis peticiones Ajax para comunicaros con el servidor, como por ejemplo para comunicaros con la base de datos. Esto puede tardar un poco en ejecutarse.
También puede ser que, el que quiera ver vuestra página, tenga una conexión lenta.
Por eso es conveniente que el usuario vea que, al pinchar en el enlace, está ocurriendo algo y no se ponga a cliquear como un poseso, maldiciendo, porque no funciona. Seguimos con el ejemplo de esta página: http://www.talleresguadamia.com/index.html y los códigos serían los siguientes:
En jquery:
el HTML (estructura):
<html xmlns="http://www.w3.org/1999/xhtml">
![]()
<head>
![]()
<body>
![]()
<div id="Cuerpo">
![]()
<div id="flash">
![]()
<div id="cargando"> </div>/* nos interesa este div*/
![]()
<div id="contenido"></div>/* y este otro*/
![]()
<div id="enlaces"></div>
![]()
<div id="pie"></div>
</div> /*fin de cuerpo*/
el CSS para cargando y contenido:
Viendo el código la explicación es sencilla. En la estructura HTML ponemos en div "cargando" encima de "contenido". En el CSS podéis ver que tanto "cargando" como "contenido" tienen los mismos valores excepto "cargando" al que añadimos "display:none" para hacerlo invisible. Cuando se ejecute el código JQUERY al pinchar el enlace, vamos modificando los valores de "display" a "none" e "inline" según podéis ver.
Por eso es conveniente que el usuario vea que, al pinchar en el enlace, está ocurriendo algo y no se ponga a cliquear como un poseso, maldiciendo, porque no funciona. Seguimos con el ejemplo de esta página: http://www.talleresguadamia.com/index.html y los códigos serían los siguientes:
En jquery:
<script type="text/javascript">
$(document).ready(function(){
$("#contenido a").each(function(){
var href = $(this).attr("href");
$(this).attr({ href: "#"});
$(this).click(function(event){
$("#contenido").css("display","none"); /* "contenido" no se ve */
$("#cargando").css("display", "inline");/* "cargando" es visible */
$("#contenido").load(href).fadeIn(700);/* cargamos la página solicitada*/
$("#cargando").css("display", "none");/* "cargando" es invisible */
});
});
});;
</script>
el HTML (estructura):
<html xmlns="http://www.w3.org/1999/xhtml">
</head>
</div> /*fin de cuerpo*/
</body>
</html>
el CSS para cargando y contenido:
#cargando {
display: none; /*esta es la linea importante display none*/
width:766px; height:1000px;
background-color:#FFFFFF;
float:left;
}
#contenido{
width:766px; height:1000px;
background-color:#D7D6D6;
float:left;
}
display: none; /*esta es la linea importante display none*/
width:766px; height:1000px;
background-color:#FFFFFF;
float:left;
}
#contenido{
width:766px; height:1000px;
background-color:#D7D6D6;
float:left;
}
Viendo el código la explicación es sencilla. En la estructura HTML ponemos en div "cargando" encima de "contenido". En el CSS podéis ver que tanto "cargando" como "contenido" tienen los mismos valores excepto "cargando" al que añadimos "display:none" para hacerlo invisible. Cuando se ejecute el código JQUERY al pinchar el enlace, vamos modificando los valores de "display" a "none" e "inline" según podéis ver.
Comentarios
Publicar un comentario