Cómo cargar y animar contenido con jQuery

En este tutorial tomaremos tu sitio web promedio diario y lo mejoraremos con jQuery. Agregaremos la funcionalidad ajax para que el contenido se cargue en el contenedor relevante en lugar de que el usuario tenga que navegar a otra página. También estaremos integrando algunos impresionantes efectos de animación..

Así que, en primer lugar, he reunido un diseño muy simple para este ejemplo. Aquí hay una captura de pantalla y el código HTML que usaremos..

    mmm… Ajax!       ajax ... nettuts
  Bienvenido
 acerca de
 portafolio
 contacto
 condiciones
 
  Bienvenido!
 Texto
 
 Tutorial de James para NETTUTS

Paso 1

Lo primero es lo primero, ve y descarga la última versión estable de jQuery y vincúlala en tu documento:

Una de las mejores cosas, en mi opinión, acerca de jQuery es su simplicidad. Podemos lograr la funcionalidad descrita anteriormente junto con efectos impresionantes en solo unas pocas líneas de código.

Primero, carguemos la biblioteca jQuery e iniciemos una función cuando el documento esté listo (cuando el DOM esté cargado).

$ (document) .ready (function () // Stuff here);

Paso 2

Entonces, lo que queremos hacer es hacerlo para que cuando un usuario haga clic en un enlace dentro del menú de navegación en nuestra página, el navegador no navegue a la página correspondiente, sino que cargue el contenido de esa página dentro de la página actual..

Queremos apuntar a los enlaces dentro del menú de navegación y ejecutar una función cuando se hace clic en ellos:

$ ('# nav li a'). haga clic en (function () // function here);

Resumamos lo que queremos que haga esta función en el orden de los eventos:

Eliminar el contenido de la página actual.
Obtener nuevo contenido de la página y añadir al contenido DIV.

Necesitamos definir de qué página se obtienen los datos cuando se hace clic en un enlace. Todo lo que tenemos que hacer aquí es obtener el atributo 'href' del enlace en el que se hizo clic y definirlo como la página desde la cual llamar a los datos, además debemos definir el paradero en la página solicitada para obtener los datos, es decir, no lo hacemos. desea extraer TODOS los datos, solo los datos dentro del div 'contenido', así que:

var toLoad = $ (this) .attr ('href') + '#content';

Para ilustrar lo que hace el código anterior, imaginemos que el usuario hace clic en el enlace 'sobre' que enlaza con 'about.html'. En esta situación, esta variable sería: 'about.html #content': esta es la variable que nosotros ' Solicitud ll en la llamada ajax. Sin embargo, primero debemos crear un buen efecto para el contenido de la página actual. En lugar de hacerlo desaparecer, vamos a utilizar la función 'hide' de jQuery de esta manera:

$ ('# content'). hide ('fast', loadContent);

La función anterior "oculta" el #content div a una velocidad rápida, y una vez que el efecto finaliza, inicia la función "loadContent" (cargar el contenido nuevo [a través de ajax]) - una función que definiremos más adelante (en el paso 4 ).

Paso 3

Una vez que el contenido antiguo desaparece con un efecto impresionante, no queremos dejar al usuario preguntándose antes de que llegue el nuevo contenido (especialmente si tienen una conexión a Internet lenta), por lo que crearemos un pequeño gráfico de "carga" para que sepan. algo está sucediendo en el fondo:

$ ('# wrapper'). append ('CARGANDO… '); $ ('# load'). fadeIn ('normal');

Aquí está el CSS aplicado al #load div recién creado:

#load display: none; posición: absoluta; derecha: 10px; superior: 10px; fondo: url (images / ajax-loader.gif); ancho: 43px; altura: 11px; texto-guión: -9999em;

Entonces, de forma predeterminada, este intervalo de 'carga' está configurado para mostrar: ninguno, pero cuando se inicia la función fadeIn (en el código anterior), se desvanecerá en la esquina superior derecha del sitio y mostrará nuestro GIF animado hasta que esté se desvaneció de nuevo.

Etapa 4

Hasta ahora, cuando un usuario haga clic en uno de los enlaces, sucederá lo siguiente:

El contenido actual desaparece con un efecto genial.
Aparece un mensaje de carga.

Ahora, escribamos esa función loadContent a la que llamamos anteriormente:

function loadContent () $ ('# content'). load (toLoad, ", showNewContent)

La función loadContent llama a la página solicitada, luego, una vez hecho esto, llama a la función 'showNewContent':

función showNewContent () $ ('# content'). show ('normal', hideLoader);

Esta función showNewContent usa la función show de jQuery (que en realidad es un nombre muy aburrido para un efecto genial) para hacer que el contenido nuevo (solicitado) aparezca dentro de la división '#content'. Una vez que ha llamado al contenido, inicia la función 'hideLoader':

function hideLoader () $ ('# load'). fadeOut ('normal');

Debemos recordar "devolver falso" al final de nuestra función de clic, esto es para que el navegador no navegue a la página

Debería funcionar perfectamente ahora. Puedes ver un ejemplo aquí: [ENLACE]

Aquí está el código hasta ahora:

$ (document) .ready (function () $ ('# nav li a'). click (function () var toLoad = $ (this) .attr ('href') + '#content'; $ (' #content '). hide (' fast ', loadContent); $ (' # load '). remove (); $ (' # wrapper '). append ('CARGANDO… '); $ ('# load'). fadeIn ('normal'); function loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) function showNewContent () $ ('# content'). show ('normal', hideLoader ()); function hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Paso 5

Podría detenerse allí, pero si le preocupa la facilidad de uso (que debería serlo) es importante trabajar un poco más. El problema con nuestra solución actual es que descuida la URL. ¿Qué pasaría si un usuario quisiera enlazar a una de las 'páginas'? - No hay forma de que lo hagan porque la URL es siempre la misma.

Por lo tanto, una mejor manera de hacerlo sería utilizar el valor 'hash' en la URL para indicar lo que el usuario está viendo. Entonces, si el usuario está viendo el contenido 'acerca de', entonces la URL podría ser: 'www.website.com/#about'. Solo necesitamos agregar una línea de código a la función 'clic' para que el hash se agregue a la URL cada vez que el usuario haga clic en un enlace de navegación:

window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5);

El código anterior básicamente cambia el valor de hash de la URL al valor del atributo 'href' del enlace pulsado (menos la extensión '.html'. Entonces, cuando un usuario hace clic en el enlace 'inicio' (href = index.html), el hash el valor leerá '#index'.

Además, queremos hacer posible que el usuario escriba la URL y reciba la página correcta. Para hacer esto, verificamos el valor de hash cuando se carga la página y cambiamos el contenido en consecuencia:

var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function () var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5 )) var toLoad = hash + '. html #content'; $ ('# content'). load (toLoad));

Con esto incluido aquí está todo el código javascript requerido: (más la biblioteca jQuery)

$ (document) .ready (function () // Compruebe el valor de hash en la URL var hash = window.location.hash.substr (1); var href = $ ('# nav li a'). each (function ( ) var href = $ (this) .attr ('href'); if (hash == href.substr (0, href.length-5)) var toLoad = hash + '. html #content;; $ (' #content '). load (toLoad)); $ (' # nav li a '). click (function () var toLoad = $ (this) .attr (' href ') +' #content '; $ ('#content'). hide ('fast', loadContent); $ ('# load'). remove (); $ ('# wrapper'). append ('CARGANDO… '); $ ('# load'). fadeIn ('normal'); window.location.hash = $ (this) .attr ('href'). substr (0, $ (this) .attr ('href'). length-5); function loadContent () $ ('# content'). load (toLoad, ", showNewContent ()) function showNewContent () $ ('# content'). show ('normal', hideLoader ()); hideLoader () $ ('# load'). fadeOut ('normal'); return false;););

Terminado…

Lo mejor de este método es que es adaptable y se puede aplicar a un sitio en cuestión de minutos. Es totalmente discreto y el sitio web funcionará normalmente si el usuario tiene JS desactivado.

Ver el ejemplo de trabajo final

Descarga el HTML, JS, CSS e imágenes.

Código