usando el plugin de
http://www.mikage.to/jquery/jquery_history.html
crea 3 páginas con nombre
uno.html
dos.html
tres.html
esos html van a ser los que se van a cargar
lo que inicio es historyInit, va la página inicial, el index o la pagina donde se inicia el plugin
$.historyInit(pageload, "index.html");
la función pageload es la que se encarga de llamar y cargar las paginas
Código HTML:
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
// restore ajax loaded state
if($.browser.msie) {
// jquery's $.load() function does't work when hash include special characters like aao.
hash = encodeURIComponent(hash);
}
$("#load").load(hash + ".html");
} else {
// start page
$("#load").empty();
}
}
a pageload se le pasa como parámetro la que contiene el ancla por ej si la url es .html#uno
el parámetro hash va a contener "uno", fijense que load tiene como parámetro hash + ".html" entonces va a quedar load(uno.html)
lo saca del valor del href en el evento click del enlace
Código HTML:
var hash = this.href;
hash = hash.replace(/^.*#/, '');
encontes para hacer referencia el link con las paginas ponen en el href "#uno" o sea que el link va a hacer referencia al archivo uno.html, para hacer referencia a dos.html el href tiene que ser "#dos"
el contenido de las paginas lo carga en un elemento con id "load" $("#load").load(hash + ".html");
el código completo
Código HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.mikage.to/jquery/jquery.history.js"></script>
<script>
function pageload(hash) {
// alert("pageload: " + hash);
// hash doesn't contain the first # character.
if(hash) {
// restore ajax loaded state
if($.browser.msie) {
// jquery's $.load() function does't work when hash include special characters like aao.
hash = encodeURIComponent(hash);
}
$("#load").load(hash + ".html");
} else {
// start page
$("#load").empty();
}
}
$(document).ready( function (){
// Initialize history plugin.
// The callback is called at once by present location.hash.
$.historyInit(pageload, "prueba.html");
// set onlick event for buttons
$("a[rel='history']").click(function(){
//
var hash = this.href;
hash = hash.replace(/^.*#/, '');
// moves to a new page.
// pageload is called at once.
// hash don't contain "#", "?"
$.historyLoad(hash);
return false;
});
});
</script>
</head>
<body>
<a href="#uno" rel="history">Uno</a> - <a href="#dos" rel="history">Dos</a> - <a href="#tres" rel="history">Tres</a>
<div id="load"></div>
</body>
</html> creo que eso es todo