Pues aquí lo tengo. En verdad no fue nada complejo, solo modificar unos detalles del código original y agregarle el que ya tenía. Quizá el script sea tres o cuatro veces más grande, pero llamarle con los links es mucho más sencillo y accesible:
Código:
/*Creado a partir del código de Pop-Ups Accesibles por PatomaS*/
document.write("<p>Seleccione un link del menú.</p>");
if (navigator.userAgent.search(/msie/i) > 0) {
DatosIniciales();
} else {
document.addEventListener("DOMContentLoaded", DatosIniciales, false);
}
function DatosIniciales() {
var ListaVinculos = document.links;
var TotalVinculos = ListaVinculos.length;
var SubListaVinculos = new Array(); // Subgrupo de los vínculos que nos interesan
var z = 0;
for (n = 0; n < TotalVinculos; n++) {
if ((ListaVinculos[n].attributes.rel != null) && (ListaVinculos[n].attributes.rel.value.search(/ajax/i)>= 0) ) {
SubListaVinculos[z] = ListaVinculos[n];
z++;
}
}
AsignarEscuchas(SubListaVinculos);
}
function AsignarEscuchas(x) {
var SubListaVinculos = x;
var TotalSubListaVinculos = SubListaVinculos.length;
for (n = 0; n < TotalSubListaVinculos; n++) {
if (navigator.userAgent.search(/msie/i) >= 0) {
SubListaVinculos[n].attachEvent("onclick", Ajax); // Explorer
} else {
SubListaVinculos[n].addEventListener("click", Ajax, false); // DOM
}
}
}
function Ajax(evento) {
if (this.getAttribute) {
var pagina = this.getAttribute('href');
var propiedades = this.getAttribute('rel').split("-");
evento.preventDefault();
} else {
var uri = evento.srcElement.getAttribute('href');
var subpagina = evento.srcElement.getAttribute('href').split("/");
var pagina = subpagina[subpagina.length-1];
var propiedades = evento.srcElement.getAttribute('rel').split("-");
}
if (propiedades[0] == "ajax") {
loadurl(pagina, propiedades[1]);
return false;
}
}
function loadurl(url, id){
var pagecnx = createXMLHttpRequest();
pagecnx.onreadystatechange=function()
{
if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(id).innerHTML=pagecnx.responseText;
}
pagecnx.open('GET', url, true)
pagecnx.send(null)
}
function createXMLHttpRequest() {
var xmlHttp=null;
if (window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if (window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
return xmlHttp;
}
Para usar los links se hace de esta forma:
Código HTML:
<a href="pagina1" rel="ajax-main">Página 1</a>
Donde "main" sea el id del DIV donde se cargará el contenido.
Opiniones y sugerencias para mejorarlo, son bien recibidas