Hace no mucho tuve un cliente que insitia en tener un flash con musica en su pagina web y que esta no se corte cuando cambie de página para lograr esto hay que evitar que se recargue la pagina, lo que se puede lograr usando iframes sin embargo esta solución implicaba reprogramar varias cosas, intenté convencer al cliente de lo inconveniente de usar frames y de poner música pero no aceptó.
En vista de esto tuve que inventar algo que permita que mi página funcione sin demasiados cambios y darle el gusto al cliente, por lo que implementé esta solución usando AJAX, para ser más preciso jquery.
Web Modular
La web modular se basa en varios pedazos de código que se juntan (encabezado, menu, contenido, pie de pagina), eso ya lo expliqué en un post anterior.
Cargar los contenidos sin recargar
Aqui va la parte interesante, hay que hacer que los links llamen contenidos via ajax (jquery), lo que se logra primero agregando a cada link la clase ajaxmenu
[cc lang=»html»]
Homepage |
About Us |
Services |
Contact Us
[/cc]
y agregando este código al top_page.php dentro del header y entre etiquetas script
[cc lang=»javascript»]
$(document).ready(function(){
$.ajaxSetup ({
cache: false
});
//// Imagen mientras carga el contenido
var ajax_load = «
«;
// Interceptar el link de los menus
$(«.ajaxmenu»).click(function(){
/// Extraemos el nombre de la pagina que esta en el link
var loadUrl = $(this).attr(‘href’);
/// Llamamos el contenido
$(«#contenido»).html(ajax_load).load(loadUrl);
return false;
});
});
[/cc]
En la segunda parte de este tutorial explico como hacerlo funcionar cuando los links son internos, y más importante cuando usamos anclas
