Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • JQuery Waypoints

    Cargado por

    joubertmucha
    65 vistas7 páginas

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    65 vistas7 páginas

    JQuery Waypoints

    Cargado por

    joubertmucha

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 7

    JQuery Waypoints: realizando acciones al llegar a un punto de la pgina con el scroll.

    0. ndice de contenidos.

    1. Introduccin. 2. Entorno. 3. El escenario. 4. La pgina. 5. Registrando el waypoint y realizando las acciones. 6. Referencias. 7. Conclusiones.

    1. Introduccin
    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 ms usables y nos sorprenden con nuevas caractersticas que mejoran la experiencia del usuario. Una de las caractersticas que ms de moda est ltimamente son los efectos que se producen al llegar a determinado punto de la pgina 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 oFrance Football entre 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 accin el plugin Waypoints de jQuery, aprenderemos a realizar acciones al llegar con el scroll a un cierto punto de la pgina 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: Porttil 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 ms ciudades. As sucesivamente hasta que no haya ms. Cuando el usuario llegue al final y no haya ms ciudades se mostrar un listado con otros enlaces de inters. Por tanto lo que haremos ser:

    Al cargar la pgina 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 mostrarn las 10 ciudades siguientes. Cuando ya no haya ms ciudades a mostrar y el usuario haya llegado al final se mostar un listado con otros enlaces de inters. Si estamos mostrando el listado de otros enlaces de inters y el usuario sube con el scroll se ocultar el listado.

    Ntese que para este ejemplo, por comodidad, las ciudades las tendremos directamente en el cliente (en un array) pero en una aplicacin real lo ideal sera que se hiciese una consulta al servidor (AJAX) para que devuelva el listado de las 10 ciudades correspondientes segn la posicin del scroll (paginacin).

    4. La pgina.
    Lo primero que haremos ser definir la estructura de la pgina donde pintaremos las ciudades. Al realizar las acciones dinmicamente con Javascript, la estructura de la pgina ser muy simple pero hay algunos elementos que merece la pena destacar. ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T <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">

    17 18 19 20 21 22 23 24 25 26 27 28 29 30

    <ul> <li><b>Leer ms:</b></li> <li><a href="#" target="_blank">Link <li><a href="#" target="_blank">Link <li><a href="#" target="_blank">Link <li><a href="#" target="_blank">Link </ul> </div> </body> </html> 1</a></li> 2</a></li> 3</a></li> 4</a></li>

    Pues esto ser la estructura de nuestra pgina. Muy sencilla. La "chicha" vendr cuando metamos la parte Javascript, pero eso ser otro apartado. Destacan tres elementos de la pgina, referenciados por los ids: 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 accin que corresponda: cargar ms ciudades o mostrar los enlaces de inters. El elemento leerMas ser el que contiene los enlaces de inters a mostrar cuando ya no haya ms 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 pgina creada, lo siguiente que debemos hacer es aadirle 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 accin. Para ello el plugin nos ofrece un mtodo ".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 aade una funcin de callback que ser invocada cuando se produzca el evento del scroll (sea sobrepasado). Acepta, adems, una lista de opciones. La funcin de callback recibe dos parmetros: el evento y la direccin del scroll (arriba o abajo). elemento.waypoint('destroy'): el elemento deja de ser un waypoint y se elimina su funcin de callback. elemento.waypoint('remove'): el elemento deja de ser un waypoint pero no se elimina la funcin de callback. Si se vuelve a registar el elemento como waypoint no es necesario pasarle como parmetro 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 pasndole la funcin de callback. Esta funcin ser la encargada de realizar las acciones que definimos anteriormente. Debe pintar ms ciudades en el caso de que las haya o mostrar una lista de enlaces de inters si ya no existen mas ciudades. Cuando el scroll sobrepase a nuestro waypoint se invocar a la funcin 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 cdigo sera algo como esto: ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

    var ciudades = ['ALCALA_DE_HENARES','AMSTERDAM','ARANJUEZ','ATENAS','BARCELONA','BE 'BRUJAS','BRUSELAS','BUCAREST','BUENOS_AIRES','COPENHAGUEN','CASABLANCA','DUBLI 'EL_CAIRO','ESTAMBUL','LONDRES','MALAGA','MOSCU','NUEVA_DELHI','NUEVA_YORK','OP 'PALMA_DE_MALLORCA','PARIS','PEKIN','RIO_DE_JANEIRO','ROMA','TOKIO','TORONTO',' 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 mostramo // 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 {

    36 37 38 39 40 41 42 43 44

    if (direction == 'down') { // si no hay mas ciudades y el scroll va hacia abajo mostramos link 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 inters seran: ?

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

    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 } 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 tendramos nuestro problema resuelto. Como puede apreciarse en la figura, al llegar al final del documento (donde est nuestro waypoint), realizamos la carga de ms ciudades.

    Si ya no hay ms ciudades que mostrar, aparecer un listado con otros posibles enlaces de inters.

    PODEIS VER EL EJEMPLO EN ACCIN AQU.

    6. Referencias.

    jQuery Waypoints Ejemplo.

    7. Conclusiones.
    En este tutorial hemos visto una caracterstica bastante interesante para aadir a nuestras webs como son los eventos al pasar con el scroll por un determinado punto de la pgina. Personalmente, me parecen especialmente interesantes los dos aspectos que hemos visto en el tutorial: la paginacin dinmica al llegar al final de la pgina (carga de contenidos bajo demanda) y la lista de enlaces de inters (que mejora la usabilidad del sitio de forma muy

    elegante). Sin embargo existen muchas otras utilidades. Ultimamente se ven muchos efectos paralax basados tambin en esta tcnica. Aqu podis ver un ejemplo.

    También podría gustarte