Cargar paginas web en una capa con jquery y javascrpit

Saludos amigos esta vez les traigo una forma de cargar varias páginas web dentro de una capa con jquery y javascript .

Ejemplo de la utilización de la instrucción load() de jquery para cargar el contenido de varias páginas dentro de un div. Si la carga demora demasiado nos mostrará un loader.gif para saber que está cargando.

Como podrás ver en el demo nos servirá mucho para no tener que ir página por página buscando algún contenido o instrucción de nuestra web , existen otras forma de utilizar esta instrucción incluso hasta para actualizar el contenido de una capa cada cierto tiempo sin necesidad de refrescar la página pero ese es otro tema que hablaremos en otro momento.

Archivos a utilizar:

index.html

las paginas a utilizar

jquery.js

Dentro del <head> y </head> vamos a colocar la librería jquery y el código javascript que dará el efecto deseado..

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

	<script type='text/javascript'>
    function cargarContenido(pagina)
    {
        // cargamos el icono en el div donde ira el contenido
        $("#capa").html("<img src='ajax-loader.gif' class='loader' border='0' />");
        // cargamos la pagina en el div capa
        $("#capa").load(pagina);
    }
    </script>
	</head>

Dentro del body colocaremos el div capa y un enlace para llamar la página..

<a onClick="cargarContenido('pagina.html')" href="#">Pagina 1</a>
<!--cargar contenido en capa--><div id='capa'></div>

Podrás hacer uso del script como mas te convenga suerte hasta la próxima…

Demostración