Como Cargar y Animar Contenido con jQuery

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

En este curso, tomaremos su sitio web promedio de hoy en día y lo mejoraremos con jQuery. Añadiremos las funciones de ajax para que el contenido cargue dentro de un contenedor relevante en vez de que los usuarios tengan que navegar hacia otra página. Además, integraremos algunos efectos de animación asombrosos.

Así que en primer lugar, tengo que elaborar una composición muy simple para este ejemplo. Acá está una captura de pantalla y el código HTML que usaremos.


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>mmm... Ajax!</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
@import url(css.css);
</style>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
    <div id="wrapper">
    <h1>ajax ... nettuts</h1>
    <ul id="nav">
        <li><a href="index.html">welcome</a></li>
        <li><a href="about.html">about</a></li>
        <li><a href="portfolio.html">portfolio</a></li>
        <li><a href="contact.html">contact</a></li>
        <li><a href="terms.html">terms</a></li>
    </ul>
    <div id="content">      
        <h2>Welcome!</h2>
        <p>Text</p>
    </div>
    <div id="foot">Tutorial by James for NETTUTS</div>
</div>
</body>
</html>

Paso 1

Primero lo primero, vaya y descargue el último lanzamiento de jQuery y enlace éste con su documento.

1	<script type="text/javascript" src="jQuery.js"></script>

Una de las mejores cosa, en mi opinión, acerca de jQuery es su sencillez. Podemos lograr la funcionalidad que describimos anteriormente acompañada con efectos impresionantes con tan sólo algunas líneas de código.

Primero vamos a cargar la biblioteca jQuery y a introducir una función cuando el documento ya éste listo (es decir, cuando el DOM está cargado).

1
2	$(document).ready(function() {
3	// Stuff here
4	});

Paso 2

Así que lo que queremos hacer lo hacemos porque cuando un usuario hace clic sobre un enlace dentro de un menú de la navegación en nuestra página y el navegador no navega hacia la página correspondiente, sino que carga el contenido de esa página dentro de la página actual.

Queremos dirigir el enlace dentro del menú de la navegación y correr una función cuando hayan sido presionado por el usuario:

1
2	$('#nav li a').click(function(){
3	// function here
4	});

Vamos a resumir lo que queremos que haga ésta función:

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

Necesitamos definir de cual página conseguir los datos cuando un enlace es activado. Todo lo que tenemos que hacer aquí es obtener el atributo 'href' del enlace en el cual se hace clic y definir que desde esa página llamaremos los datos, además, necesitamos definir el paradero de la página solicitada para jalar los datos desde ahí, por ejemplo, No queremos jalar TODOS los datos, solamente los datos dentro del DIV contenido, así:

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

Para ilustrar el código anterior, vamos a imaginar que el usuario hace clic sobre el enlace 'Acerca…' cuyo enlace dirige hacia 'about.html', bueno; en esta situación, ésta variable sería: 'about.html #content' - está es la variable que requerimos en la solicitud ajax. Aunque primero, necesitamos crear un efecto genial para el contenido de la página actual. En vez de sólo hacerlo desaparecer, vamos a usar la función de jQuery 'hide' [ocultar], así como ésta:

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

La función anterior 'hide', oculta el div #content en mejor tiempo y una vez que el efecto termino entonces inicia la función "loadContent" (que carga el contenido nuevo [a través de ajax]), que es una función que definiremos después (en el paso 4).

Paso 3

Una vez que el contenido anterior desaparece con un efecto estupendo, no queremos tan sólo dejar que el usuario se maraville antes de que venta el contenido nuevo (especialmente si tienen una baja conexión a internet) así que crearemos un pequeño gráfico 'loading' [cargando] así, ellos saben que algo está pasando en el fondo:

1
2	$('#wrapper').append('<span id="load">LOADING...</span>');
3	$('#load').fadeIn('normal');

Aquí está el código CSS aplicado al div #load recientemente creado:


#load {
	display: none;
	position: absolute;
	right: 10px;
	top: 10px;
	background: url(images/ajax-loader.gif);
	width: 43px;
	height: 11px;
	text-indent: -9999em;
}

Por lo tanto, ésta etiqueta por defecto span 'load' tiene configurada la opción display:none, pero cuando la función fadeIn comienza (en el código de arriba) éste aparecerá en la esquina superior derecha del sitio y mostrará nuestro GIF animado hasta que éste desaparezca nuevamente.

Paso 4

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

El contenido actual desaparece con un efecto estupendo:
Un mensaje de carga aparece

Ahora, vamos a escribir esa función loadContent que llamamos anteriormente:

1
2	function loadContent() {
3	$('#content').load(toLoad,'',showNewContent)
4	}

Esta función loadContent llama la página solicitada, entonces; una vez que está hecho, llama a la función 'showNewContent':

1
2	function showNewContent() {
3	$('#content').show('normal',hideLoader);
4	}

Ésta función showNewContent usa la función mostrar de jQuery (que actualmente tiene un nombre muy aburrido para un efecto tan bueno) para hacer que el nuevo contenido (solicitado) aparezca dentro del div '#content'. Una vez que ha sido llamado el contenido, éste inicia la función 'hideLoader':

1
2	function hideLoader() {
3	$('#load').fadeOut('normal');
4	}

Tenemos que recordar que debemos escribir "return false" al final de nuestra función click, esto es para que el navegador no navegue hacia la página.

Ahora debería funcionar perfectamente. Puede ver un ejemplo de esto aquí: [LINK].

Aquí está el código de lo que hemos hecho hasta ahora:


$(document).ready(function() {

    $('#nav li a').click(function(){
    
    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#wrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    function loadContent() {
    	$('#content').load(toLoad,'',showNewContent())
    }
    function showNewContent() {
    	$('#content').show('normal',hideLoader());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Paso 5

Usted podría parar ahí pero si usted está preocupado sobre la funcionalidad (que así debería ser) es importante hacer un poco más de trabajo. El problema con nuestra solución actual es que es descuida la URL. ¿Qué pasa si un usuario quiso enlazar hacia una de las "páginas"? No hay manera de que hagan eso porque la URL es siempre la misma.

Así que, una mejor manera de hacer esto sería usar el valor 'hash' en la URL para indicar que es lo que el usuario está viendo. Así que sí el usuario está viendo el contenido 'Acerca…' entonces la URL podría ser: 'www.website.com/#about'. Sólo necesitamos añadir una línea de código a la función 'click' para que el símbolo hash sea añadido a la URL siempre que los usuarios hagan clic sobre el enlace en la navegación:

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

El código anterior, básicamente cambia el valor hash URL al valor del enlace sobre el que se hace clic en el atributo 'href' (menos la extensión '.html'. Así cuando un usuario hacer clic en el enlace 'inicio' (href=index.html) entonce el valor hash leerá '#index'.

Asimismo, queremos hacer posible para los usuarios poder teclear en la URL y notificar la página actual. Para hacer esto, comprobamos el valor hash cuando la página cargue y cambiamos el contenido por consiguiente.


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, es todo el código que requerimos de javascript: (más la biblioteca jQuery).


$(document).ready(function() {
	
    // Check for hash value in 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('<span id="load">LOADING...</span>');
    $('#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());
    }
    function hideLoader() {
    	$('#load').fadeOut('normal');
    }
    return false;
    
    });
});

Completado...

Lo mejor acerca de éste método es que es ajustable y puede ser aplicado a un sitio en cuestión de minutos. Es completamente discreto y el sitio web funcionará de forma normal aún si los usuarios tienen desactivado JS.

Vea el Ejemplo Final Funcionando.

Descargue el HTML, JS, CSS y las imágenes a través de éste enlace.