Programación GoibelaTodo sobre programación |
||
Nuevos Articulos
Nuevos Comentarios |
Cargar contenido al usar el scroll con jQueryViernes, 09-12-2011 21:36 - Leer comentarios - Comentar Una cosa bastante atractiva que están implementando muchas webs es la carga de datos utilizando el scroll.El mecanismo consiste en cargar una serie de datos en pantalla. Para ir viendo los datos utilizaremos el scroll. Y cuando el scroll alcance el final de la página, cargaremos nuevos datos, permitiéndonos hacer más scroll. Así, una y otra vez cada vez que lleguemos al final de la página. Esto lo podemos ver en webs como Facebook y Twitter. Para realizar nuestro ejemplo nos vamos a basar en el artículo Repaginar con jQuery y AJAX. Lo único que vamos a hacer es sustituir los botones de repaginación por el funcionamiento del scroll. Lo que hay que tener claro en este ejemplo es conocer como es la estructura del contenido que vamos a solicitar al servidor. Para ello tenemos una capa principal que será la lista de mensajes y dentro de esta N capas dónde estarán los mensajes concretros. El código HTML sería algo así: JavaScript
Lo primero con jQuery será cargar el fichero de jQuery que nos ayudará en la realización del código JavaScript
JavaScript
$(document).ready(function() { cargardatos(); }); JavaScript
function cargardatos(){ $.get("/web/datos.php?pagina="+pagina, function(data){ if (data != "") { $(".mensaje:last").after(data); } }); } La petición AJAX con jQuery la realizamos mediante la función .get(). Lo más importante es que la respuesta de la petición la dejamos detrás del último mensaje de la capa de mensajes mediante la función .after(). El selector que utilizamos es .mensaje:last JavaScript
$(".mensaje:last").after(data); Para el cálculo hay que conocer 3 variables: Alto del documento , es el tamaño del documento: document).height() Alto de la ventana , es el tamaño de la ventana: $(window).height() Posición del scroll , es la posición del documento en la que se encuentra el scroll: $(window).scrollTop() De esta forma, cuando a la posición del scroll le sumemos el tamaño de la ventana y nos dé el tamaño del documento, será que habremos llegado al final del documento y por lo tanto hay que lanzar una nueva carga de datos. JavaScript
$(window).scrollTop() == $(document).height() - $(window).height() JavaScript
$(window).scroll(function(){ if ($(window).scrollTop() == $(document).height() - $(window).height()){ pagina++; cargardatos() } }); ComentariosNatas - Viernes, 10-02-2012 04:18 I like to hard code tihgns like this into my theme but, I have to admit, that I took the easy option and I’m currently using the UItoTop jQuery Plugin. No se permiten comentarios en este momento. |
RSS Feeds |