Bueno, primero hay que arreglar las rutas de los archivos:
Código HTML:
<link href="pageLoader.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="../utils/history.js"></script>
<script type="text/javascript" src="pageLoader.js"></script>
ellos incluyen su hoja de estilos:
Código HTML:
<link rel="stylesheet" href="../_common/css/main.css" type="text/css" media="all">
pero pues nosotros no la necesitamos porque se supone que usamos las nuestras.
Luego el div donde se carga el contenido nuevo va asi:
Código HTML:
<div id="ajaxContent" class="centro" ></div>
<script type="text/javascript">
window.addEvent('domready', function(){
new pageLoader({loadInTo:'ajaxContent'});
new History();
});
</script> de ahi, solo el class="centro" es mio, que lo uso para darle los parametros al div. Como se ve, el script va directamente despues del div ajax, y luego de eso lo que tengas en tu página.
el div que llevará el contenido debe llamarse "content" así:
Código HTML:
<div id="content">
y en tu css pues acomodas los parametros. El nombre se puede cambiar, pero habria que hacer otros cambios, asi es mas facil.
de ultimo (y aqui fue donde falle) se crea una página html con el div que se va a cargar:
Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="css/div-styles.css" type="text/css" />
<link rel="stylesheet" href="css/txt-styles.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="css/div-styles-IE.css" type="text/css" />
<![endif]-->
</head>
<body>
<div id="content">
aqui lo que quieras
</div>
</body>
</html>
lo unico que ocupas cargar son tus hojas css, y asi funciona
