0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. El escenario.
- 4. La página.
- 5. Registrando el waypoint y realizando las acciones.
- 6. Referencias.
- 7. Conclusiones.
1. Introducción
Desde la llegada de HTML5 vivimos momentos dulces en lo que a desarrollo front-end de aplicaciones web se refiere. Los sitios cada vez son más usables y nos sorprenden con nuevas características que mejoran la experiencia del usuario.
Una de las características que más de moda está últimamente son los efectos que se producen al llegar a determinado punto de la página con la barra de scroll. Un ejemplo puede ser el paginador por scroll, donde el sitio nos presenta una serie de contenidos y, al llegar al final con el scroll, se vuelven a cargar nuevos contenidos. Es el caso de Twitter o France Footballentre otros.
Otro caso que personalmente me encanta es el de determinados sitios que, al leer un contenido (como puede ser una noticia) y llegar al final te presentan en forma de panel flotante una lista con otros links que pueden ser de tu interes (relacionados con esa misma noticia).
En este tutorial veremos en acción el plugin Waypoints de jQuery, aprenderemos a realizar acciones al llegar con el scroll a un cierto punto de la página y comentaremos algunas de las posiblidades que esto nos ofrece para nuestros sitios web.
2. Entorno.
El tutorial está escrito usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 8GB DDR3).
- Sistema Operativo: Mac OS Snow Leopard 10.6.7
- Entorno de desarrollo: Intellij Idea 11.1 Ultimate.
- jQuery 1.7.2.
- jQuery Waypoints 1.1.6.
- Mozilla Firefox 11.
- Google Chrome 18.
- Safari 5.1.
- Internet Explorer 9.
3. El escenario.
El ejemplo que vamos a montar deberá mostar un listado de ciudades, cuando el usuario llegue al final cargará más ciudades. Así sucesivamente hasta que no haya más. Cuando el usuario llegue al final y no haya más ciudades se mostrará un listado con otros enlaces de interés.
Por tanto lo que haremos será:
- Al cargar la página mostraremos las 10 primeras ciudades que tenemos. Para cada ciudad se presentará: su nombre, una foto y un texto.
- Cuando el usuario llegue a la última ciudad con el scroll, se mostrarán las 10 ciudades siguientes.
- Cuando ya no haya más ciudades a mostrar y el usuario haya llegado al final se mostará un listado con otros enlaces de interés.
- Si estamos mostrando el listado de otros enlaces de interés y el usuario sube con el scroll se ocultará el listado.
Nótese que para este ejemplo, por comodidad, las ciudades las tendremos directamente en el cliente (en un array) pero en una aplicación real lo ideal sería que se hiciese una consulta al servidor (AJAX) para que devuelva el listado de las 10 ciudades correspondientes según la posición del scroll (paginación).
4. La página.
Lo primero que haremos será definir la estructura de la página donde pintaremos las ciudades. Al realizar las acciones dinámicamente con Javascript, la estructura de la página será muy simple pero hay algunos elementos que merece la pena destacar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="../css/reset.css"/>
<link type="text/css" rel="stylesheet" href="../css/estilos.css"/>
<title>Ejemplo con JQUERY WAYPOINTS</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/waypoints.min.js"></script>
</head>
<body>
<h1>EJEMPLO CON JQUERY WAYPOINTS</h1>
<div id="resultados">
</div>
<p id="fin">
CARGANDO...
</p>
<div id="leerMas">
<ul>
<li><b>Leer más:</b></li>
<li><a href="#" target="_blank">Link 1</a></li>
<li><a href="#" target="_blank">Link 2</a></li>
<li><a href="#" target="_blank">Link 3</a></li>
<li><a href="#" target="_blank">Link 4</a></li>
</ul>
</div>
</body>
</html>
Pues esto será la estructura de nuestra página. Muy sencilla. La «chicha» vendrá cuando metamos la parte Javascript, pero eso será otro apartado.
Destacan tres elementos de la página, referenciados por los id´s: resultados, fin y leerMas.
El elemento resultados (div) será el sitio donde se pinten las ciudades.
El elemento fin será nuestro «waypoint». Lo que es lo mismo, será el elemento que tomaremos como referencia para que, al ser sobrepasado por el scroll, realicemos la acción que corresponda: cargar más ciudades o mostrar los enlaces de interés.
El elemento leerMas será el que contiene los enlaces de interés a mostrar cuando ya no haya más ciudades que presentar y que aparecerá o desaparecerá dependiendo de si el usuario está haciendo scroll hacia arriba o hacia abajo.
5. Registrando el waypoint y realizando las acciones.
Bueno, pues una vez ya tenemos la estructura de nuestra página creada, lo siguiente que debemos hacer es añadirle comportamiento. Para ello debemos registrar nuestro elemento «fin» como waypoint o elemento referencia que, al ser sobrepasado por el scroll, se producirá un evento que desencadenará una acción.
Para ello el plugin nos ofrece un método «.waypoint» con el que poder registrar elementos como waypoints. La forma de usarlo es la siguiente:
- elemento.waypoint(callback, opciones): registra el elemento como waypoint y añade una función de callback que será invocada cuando se produzca el evento del scroll (sea sobrepasado). Acepta, además, una lista de opciones. La función de callback recibe dos parámetros: el evento y la dirección del scroll (arriba o abajo).
- elemento.waypoint(‘destroy’): el elemento deja de ser un waypoint y se elimina su función de callback.
- elemento.waypoint(‘remove’): el elemento deja de ser un waypoint pero no se elimina la función de callback. Si se vuelve a registar el elemento como waypoint no es necesario pasarle como parámetro el callback.
Pues con esto tenemos para hacer muchas cosas. En nuestro caso es muy sencillo. Lo que debemos hacer es registrar nuestro elemento como waypoint pasándole la función de callback. Esta función será la encargada de realizar las acciones que definimos anteriormente. Debe pintar más ciudades en el caso de que las haya o mostrar una lista de enlaces de interés si ya no existen mas ciudades.
Cuando el scroll sobrepase a nuestro waypoint se invocará a la función de callback. Lo que haremos será deshabilitar el elemento «fin» como waypoint con .waypoint(‘remove’) mientras se realizan las acciones para luego volver a habilitarlo una vez hayan terminado.
El código sería algo como esto:
var ciudades = ['ALCALA_DE_HENARES','AMSTERDAM','ARANJUEZ','ATENAS','BARCELONA','BERLIN','BOGOTA',
'BRUJAS','BRUSELAS','BUCAREST','BUENOS_AIRES','COPENHAGUEN','CASABLANCA','DUBLIN','DUBROVNIK',
'EL_CAIRO','ESTAMBUL','LONDRES','MALAGA','MOSCU','NUEVA_DELHI','NUEVA_YORK','OPORTO','OSLO',
'PALMA_DE_MALLORCA','PARIS','PEKIN','RIO_DE_JANEIRO','ROMA','TOKIO','TORONTO','VIENA'];
var i = 0;
var hayMasCiudades = true;
$(document).ready(function () {
// cargamos las primeras 10 ciudades
cargarPrimerasCiudades();
// opciones del waypoint
var opts = {
offset: '100%'
};
// definimos el elemento con id="fin" como waypoint
$('#fin').waypoint(function(event, direction) {
if (hayMasCiudades) {
if (direction == 'down') {
var fin = $(this);
fin.css({'visibility' : 'visible'}); // mostramos "cargando..."
fin.waypoint('remove'); // eliminamos el waypoint mientras mostramos datos
// el settimeout "simula" la carga de datos (se debe quitar)
setTimeout(function() {
// pintamos siguientes ciudades
for (var j=0; j<10; j++) {
i++;
if (i >= ciudades.length) {
hayMasCiudades = false;
break;
}
var ciudad = new Ciudad(ciudades[i]);
anadirCiudad(ciudad);
}
// una vez pintadas las nuevas ciudades escondemos "cargando..."
fin.css({'visibility' : 'hidden'});
// reestablecemos el waypoint
fin.waypoint(opts);
}, 1000);
}
} else {
if (direction == 'down') {
// si no hay mas ciudades y el scroll va hacia abajo mostramos links
mostrarLeerMas();
} else {
// si va hacia arriba lo ocultamos
ocultarLeerMas();
}
}
}, opts);
});
El resto de funciones que sirven para pintar las ciudades y mostrar u ocultar el listado de enlaces de interés serían:
function Ciudad(nombre) {
this.nombre = nombre.replace(/_/g, ' ');
this.imagen = nombre + '.jpg';
this.texto = 'Lorem ipsum dolor ...';
}
function anadirCiudad(ciudad) {
$('#resultados').append($("<p class='ciudad'><img src='../img/" + ciudad.imagen + "' /><span>" + ciudad.nombre + "</span>" + ciudad.texto + "</p>"));
}
function cargarPrimerasCiudades() {
do {
var ciudad = new Ciudad(ciudades[i++]);
anadirCiudad(ciudad);
} while (i<10);
i--;
}
function mostrarLeerMas() {
var leerMas = $('#leerMas');
leerMas.animate({
width: 400
}, 1000, function () {
var links = $('#leerMas ul');
links.css({display : 'block'});
links.animate({opacity : 1.0}, 1500);
});
}
function ocultarLeerMas() {
var links = $('#leerMas ul');
links.animate({opacity : 0}, 500, function () {
links.css({display : 'none'});
var leerMas = $('#leerMas');
leerMas.animate({
width: 0
}, 500);
});
}
Pues con esto y una hoja de estilos tendríamos nuestro problema resuelto.
Como puede apreciarse en la figura, al llegar al final del documento (donde está nuestro waypoint), realizamos la carga de más ciudades.
Si ya no hay más ciudades que mostrar, aparecerá un listado con otros posibles enlaces de interés.
PODEIS VER EL EJEMPLO EN ACCIÓN AQUÍ.
6. Referencias.
7. Conclusiones.
En este tutorial hemos visto una característica bastante interesante para añadir a nuestras webs como son los eventos al pasar con el scroll por un determinado punto de la página.
Personalmente, me parecen especialmente interesantes los dos aspectos que hemos visto en el tutorial: la paginación dinámica al llegar al final de la página (carga de contenidos bajo demanda) y la lista de enlaces de interés (que mejora la usabilidad del sitio de forma muy elegante). Sin embargo existen muchas otras utilidades. Ultimamente se ven muchos efectos paralax basados también en esta técnica. Aquí podéis ver un ejemplo.
Espero que este tutorial os haya sido de ayuda. Un saludo.
Miguel Arlandy
A mi padre.
Twitter: @m_arlandy
Que tal quisiera ver si podrías adaptar tu sistema pero con una bd mysql y php o ver si podrías ayudarme, no soy programador pero mi sitio web lo estoy creando desde cero y reciclando código, tuve que aprender muchas cosas pero aun me falta para desarrollar un sistema así te agradeciera la ayuda gracias.