En el articulo anterior explicábamos como hacer una página web modular con php de manera sencilla y útil, pues bien, en este os vamos a explicar como hacer lo mismo (o parecido) pero con jQuery y de manera que el usuario no necesite ver el refresco de la imagen que esta viendo, por lo que añadimos un grado de atractivo y dinamismo a nuestra web.

Pues bien para empezar necesitamos la última versión de jQuery, da igual que sea la versión normal que la “min”. Una vez descargada y colocada junto a los archivos de nuestra web solo tenemos que hacer lo siguiente:

<script  type="text/javascript" src="js/jquery/jquery.1.4.2.min.js"></script>

Ahora solo nos falta definir el menu que llevará la clase “menu” que hará que jQuery intercepte la petición y la tramite sin que el usuario lo note y la capa en la que queremos que se muestre el contenido de la sección (módulo) que llamamos.
Ahora el código:

<ul>
<li><a href="contacto.php" class="menu">Contacto</a></li>
<li><a href="nosotros.php" class="menu">Nosotros</a></li>
</ul>
<script language="javascript">
$(document).ready(function(){
    $.ajaxSetup ({
        cache: false
    });
       //// Imagen mientras carga el contenido
    var ajax_load = "<img src='img/load.gif' alt='loading...' />";
 
    // Interceptar el link de los menus
    $(".menu").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;
    });
});
</script>

Con esto y un poco de imaginación podeis construir páginas webs muy dinamicas y atractivas en muy poco tiempo y de manera eficaz, algo que, yo almenos, trato de utilizar en la mayoria de mis trabajos.
¿Tu ya modulas?