Pedir presupuesto

Minisite – Cargar contenido dinamicamente con jQuery sin cambiar de página

Esta vez vamos a hacer un minisitio donde los enlaces del menú cargarán contenido dinámicamente con Mootools. El tutorial ha sido traducido de NETTUS.

Vista del resultado

Descripción del proceso

Creamos una página con un menú hecho en CSS con lista desordenada. Cada una de las partes del menú tendrá un enlace a una página la cual será cargada dinámicamente sin vincular a otra página distinta mediante la utilización de AJAX y algunos efectos vistosos.

Lo que necesitamos

Para empezar a utilizar este tipo de navegación, por supuesto necesitaremos descargar la última versión estable de jQuery

Este archivo será llamado posteriormente en el código HTML de la siguiente manera:

[js]
[/js]
Código Html

[html]

ajax … nettuts

Welcome!

Text

[/html]

Empezamos con lo bueno

Ahora vamos a detallar los pasos a seguir para llegar a un buen fin:

Paso 1

En primer lugar vamos a hacer la llamada al jQuery justo cuando el documento está listo, es decir, cuando el DOM se ha cargado.

[js]$(document).ready(function() {
// Stuff here
});[/js]

Paso 2

Ahora lo que queremos conseguir es que cuando el usuario haga clic en el menú a cualquier enlace, no nos cargue otra página, sino que cargue el contenido dentro de la página actual.

Así que tendremos que manejarlo cuando el usuario haga clic en alguno de los enlaces:

[js]$(‘#nav li a’).click(function(){
// function here
});[/js]

Lo que queremos hacer con este código es lo siguiente:

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

Para eso hay que definir de qué página hay que obtener los datos para cargarlos en el DIV. Por eso tendremos que obtener el atributo del “href” al hacer clic en el enlace.
[js]var toLoad = $(this).attr(‘href’)+’ #content’;[/js]

Para que os hagáis una idea de lo que hace este código, imaginaros que el usuario ha hecho clic en el menú about.html, con lo que la variable sería: ‘about.html #content’, y esta es la variable que solicitamos al llamar a AJAX. Primero, tendremos que añadir un efecto para la página actual. En lugar de hacer desaparecer, utilizamos la función ocultar de jQuery de este modo:

[js]$(‘#content’).hide(‘fast’,loadContent);[/js]

Esta función oculta la capa #content de manera rápida, y cuando este efecto termine, se inicializará la función LoadContent, que definiremos mas adelante.

Paso 3

Una vez que el contenido anterior desaparece, tendremos que hacer algo para que el usuario no impaciente y sepa que se esta cargando la nueva página. Para eso utilizaremos un gráfico de carga:

[js]$(‘#wrapper’).append(‘LOADING…‘);
$(‘#load’).fadeIn(‘normal’);[/js]

Y aquí esta el CSS de la nueva capa de carga:

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

Por defecto esta span id=»”load”» tiene un display:none (no se muestra) pero cuando la función fadein se inicializa, se desvanece en la esquina superior derecha y muestra el GIF indicado en el código CSS, hasta que se cargue la página y se desvanece de nuevo.

Paso 4

Hasta ahora tenemos que cuando un usuario hace clic en uno de los enlaces:

1. El contenido actual desaparece con un efecto.
2. Aparece un mensaje de cargando.

Ahora escribiremos el LoadContent del que hemos hablado antes.

[js]function loadContent() {
$(‘#content’).load(toLoad,»,showNewContent)
}[/js]

Esta función hace la llamada a la página solicitada y cuando se ha hecho llama a la función showNewContent

[js]function showNewContent() {
$(‘#content’).show(‘normal’,hideLoader);
}[/js]

Este showNewContent usa la función jQuery’s show function para hacer el nuevo pedido que aparecerá dentro de la capa #content. Una vez que ha sido llamado el contenido se inicia la función hideLoader:

[js]function hideLoader() {
$(‘#load’).fadeOut(‘normal’);
}[/js]

Tenemos que recordar devolver False al final de nuestra función clic.
El código completo hasta ahora quedará de la siguiente manera:

[js]$(document).ready(function() {

$(‘#nav li a’).click(function(){

var toLoad = $(this).attr(‘href’)+’ #content’;
$(‘#content’).hide(‘fast’,loadContent);
$(‘#load’).remove();
$(‘#wrapper’).append(‘LOADING…‘);
$(‘#load’).fadeIn(‘normal’);
function loadContent() {
$(‘#content’).load(toLoad,»,showNewContent())
}
function showNewContent() {
$(‘#content’).show(‘normal’,hideLoader());
}
function hideLoader() {
$(‘#load’).fadeOut(‘normal’);
}
return false;

});
});[/js]

Paso 5

Esto podría funcionar así, pero si nos preocupamos un poco más por la usabilidad, deberíamos seguir haciendo un poco más de trabajo. El problema que tenemos ahora es que no tiene en cuenta la URL. ¿Qué pasa si un usuario desea crear un vínculo a una de las páginas?. Ahora mismo no hay forma porque la URL es siempre la misma.

Por lo tanto, una mejor forma de hacerlo sería utilizando el valor ‘hash’ en la URL para indicar lo que le usuario está viendo. Asi que si el usuario esta viendo el “About” el contenido de la URL podría ser “wwww.website.com/#about”. Bastaría con añadir una línea de código para la función que interviene cuando el usuario hace “clic” en un enlace de la navegación

[js]window.location.hash = $(this).attr(‘href’).substr(0,$(this).attr(‘href’).length-5);[/js]

Esto cambia el valor de la URL por el valor hash del atributo href del enlace en el que se ha hecho clic (menos la extensión .html). Así que cuando un usuario hace clic en un enlace como (href=index.html) el valor hash sería #index.

Asimismo también queremos que cuando el usuario introduzca la dirección directamente en la barra de dirección, se acceda a la página correcta. Para esto tenemos que implementar el siguiente código:

[js]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)
}
});
[/js]
Una vez incluido esto ya tenemos el código completo:

[js]$(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(‘LOADING…‘);
$(‘#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;

});
});
[/js]
Para ver el resultado final y descargar los archivos, podreis acceder a la entrada en NETTUS.


Via: Nettus

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

4 comentarios

  1. se que es un tema viejo pero tengo un problema esto no sirve con todos los navegadores o browsers como hago para que sirva para todos….

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es