Aquí os dejo el código en un ejemplo, cualquier duda o problema, preguntarme.
Si alguien puede mejorar el codigo, que no dude en decirlo, :)
Código Javascript
:
Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Codigo by http://www.showdj.es</title>
<!--Codigo by http://www.showdj.es -->
<script type="text/javascript" src="http://www.jose-aguilar.com/scripts/jquery/ajax-link/js/jquery-ui-1.8.6.min.js"></script><!--Descargar este escript y alojarlo en vuestro hosting-->
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><!--Script para Actualizar -->
<script type="text/javascript">
//Este es el script que carga el contenido en un DIV
$(document).ready(function() {
//Puedes cambiar la siguiente linea por: $('#DID del div del link').click(function(){
$('a').live('click', function(event) {
$("#wrapper").load($(this).attr("href") );
});
//El anterior bloque, puedes cambiarlo por esto:
//$.ajax({
//type: "POST",
//url: "hola.php",
//success: function(a) {
//$('#div-results').html(a);
//}
//});
});
</script>
<!--NO CAMBIAR NADA DEL SIGUIENTE CODIGO, si no sabes-->
<script type="application/javascript">
$(document).ready(function() {
// Para navegadores que soportan la función.
if (typeof window.history.pushState == 'function') {
pushstate();
}else{
check(); hash();
}
});
// Chequear si existe el hash.
function check(){
var direccion = ""+window.location+"";
var nombre = direccion.split("#!");
if(nombre.length > 1){
var url = nombre[1];
//alert(url);
}
}
function pushstate(){
var links = $("a");
// Evento al hacer click.
links.live('click', function(event) {
var url = $(this).attr('href');
// Cambio el historial del navegador.
history.pushState({ path: url }, url, url);
// Muestro la nueva url
// alert(url);
return false;
});
// Función para determinar cuando cambia la url de la página.
$(window).bind('popstate', function(event) {
var state = event.originalEvent.state;
if (state) {
// Mostrar url.
// alert(state.path);
}
});
}
function hash(){
// Para IE
// Función para determinar cuando cambia el hash de la página.
$(window).bind("hashchange",function(){
var hash = ""+window.location.hash+"";
hash = hash.replace("#!","")
if(hash && hash != ""){
alert(hash);
}
});
// Evento al hacer click.
$("a").bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
// Cambio el historial del navegador.
window.location.hash = "#!" + url;
return false
});
}
</script>
</head>
<body>
<a href='home' id="en caso de asignarle un ID especifivo">prueba</a> <object type="application/x-shockwave-flash" data="http://media.showdj.es/data/dewplayer.swf" width="240" height="20" id="dewplayer" name="dewplayer"><param name="wmode" value="transparent"><param name="movie" value="http://samples.showdj.es/data/dewplayer.swf"><param name="flashvars" value="mp3=http://listen.radionomy.com/showdj-music&autostart=0&autoreplay=0&showtime=1&randomplay=1&nopointer=1"></object><!--Podeis poner play y comprobar que carga la web, sin parar la musica-->
<div id="wrapper"> <!--Aquie es donde se mostrara la url de HOME--> </div>
</body>
</html>
Ambos script sacan la URL de href='home'.
Tener cuidado con la publicidad de vuestra web/blog, porque a mi me ha dado problemas.