Un TabPage con AJAX desde cero

Después de ver estos excelentes paginadores JavaScript Tabifier y DOMTab (muy conocidas como TabPages) hechos en JavaScript, me anime a desarrollar una propia, que sea sencilla y de fácil configuración: TabPageR. A continuación no solo hago a disposición los archivos, sino que explicaré desde cero todo el código, con el objetivo de que alguien por allí pueda mejorarlo. Empecemos entonces!

Objetivo

Este (imagen) es el esquema que me trace para empezar con el desarrollo del paginador (asi llamaremos al TabPage).

• En la sección botones, colocaremos todos los botones necesarios para nuestro paginador.
• En la sección contenido, aparecerá el contenido que deseamos segun el botón seleccionado.
• Además tanto el color del contenido como del botón seleccionado será el mismo, esto dará estilo a nuestro paginador.

Procesos

Ahora determinaremos los procesos que realizaremos según el objetivo arriba expuesto. Esto es importante (en todo desarrollo) por que nos ayudará a determinar por donde empezaremos en el elaboración de cierto proyecto. Identificamos estos procesos:

• Al hacer clic en el botón deseado se mostrará el contenido apropiado y de manera instantánea (haremos uso de AJAX) .
• Los botones desactivados tendrán un color diferente al color de fondo del contenido.
• El botón seleccionado o activado tendrá el mismo color de fondo que el contenido.
• Al momento de cargar la página web debe mostrar el contenido del primer botón por defecto.

Desarrollo

script.js Este script contendrá dos funciones: 1) objetoAjax: Crea el objeto XMLHttpRequest, y 2) MostrarPagina: Mostrará el contenido indicado según dos parámetros de entrada: el contenido a mostrar y el número de botón.

function objetoAjax(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
			xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
		}
	}
	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}
function MostrarPagina(pagina,boton){
   cont = document.getElementById('contenido');
   ajax=objetoAjax();
   ajax.open("GET", pagina);
   ajax.onreadystatechange = function(){
   if (ajax.readyState == 4 && ajax.status == 200) {
   cont.innerHTML = ajax.responseText;
   }
   }
   ajax.send(null);
   //----------- configuraciones previas -------------//
   //definir los titulos de los botones
   titulo=new Array();
   titulo[0]="CSS";
   titulo[1]="HTML";
   titulo[2]="PHP";
   //definir numero de botones
   nrobtn=3;
   //definir prefijo de botones
   //(esto con el objetivo de no tener
   //problemas al momento de validar
   //nuestra página.)
   pref="boton_";
   //-------------------- fin ------------------------//
   //quita el estilo a todos los botones
   for(i=1;i<=nrobtn;i++){
   tit=titulo[i-1];
   btn=document.getElementById(pref+i);
   btn.innerHTML="<span style=\"border-top:1px #FF9900 solid; border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	border-bottom:1px #FF9900 solid; margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:1px; text-decoration:none; 	background-color:#FFFFCC;\">"+tit+"</span>";
   }
   //le da estilo al boton seleccionado
   btnA = document.getElementById(pref+boton);
   tit=titulo[boton-1];
   btnA.innerHTML="<span style=\"border-top:1px #FF9900 solid;	border-left:1px #FF9900 solid; border-right:1px #FF9900 solid;	margin-left:5px; padding-left:2px;padding-right:2px; padding-top:1px; padding-bottom:5px; text-decoration:none; 	background-color:#FFCCCC;\">"+tit+"</span>";
   }

Note que este script, tiene una sección "configuraciones previas", donde podemos definir los titulos de cada botón, el numero de botones y el prefijo del nombre que se le dará a cada botón. Esto con el fin de que, si se desea, se incluyan mas botones.

Ahora definamos una hoja de estilos para los botones y el contenido. Creamos un archivo CSS llamado estilos.css el cual contendra lo siguiente:

#botones {
width: 400px;
padding-top:2px;
padding-bottom:2px;
z-index: 0;
}
#botones a{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
text-decoration:none;
cursor:pointer;
/*Superponemos los botones para
eliminar el border inferior - only IE (como siempre!!)*/
position:relative;
z-index: 1;
}
#botones a:hover{
color:#FF0000;
}
#contenido {
/*Ancho y Alto del contenedor*/
width: 400px;
height:200px;
background-color:#FFCCCC;
border-top:1px #FF9900 solid;
padding:5px;
}
#contenido p{
color:#3366FF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

El siguiente paso será crear 3 archivos HTML, con contenido variado y darles nombres, para este caso puede ser: pagina1.html, pagina2.html y pagina3.html. Nota: Solo contenido no incluya etiquetas <html>,<head> o <body>.

Ejemplo de pagina1.html

<p>Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje formal usado para definir la presentaci&oacute;n de un documento estructurado escrito en HTML o XML (y por extensi&oacute;n en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificaci&oacute;n de las hojas de estilo que servir&aacute; de est&aacute;ndar para los agentes de usuario o navegadores.</p>

Finalmente, el archivo index.html, donde especificaremos el archivo script.js y estilos.css; además en el evento onload del body especificaremos la función MostrarPagina para
que muestre la primera pagina por defecto; y luego le damos nombre a los botones con el prefijo "boton_" (esto debe ser igual al configurado en el archivo script.js) , además en el evento onclick de cada enlace o botón llamamos a la función
MostrarPagina y especificamos como primer parametro el contenido
que se mostrará y como segundo parametro el número de boton.

<html>
<head>
<title>TabPage 0.1</title>
<script language="JavaScript" type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body onload="MostrarPagina('pagina1.html','1')">
<p>Este ejemplo muestra un tabpages  hecho en ajax, es una manera de organizar nuestra informaci&oacute;n. Espero les sirva. </p>
<div id="botones">
<a id="boton_1" onclick="MostrarPagina('pagina1.html','1')">P&aacute;gina 1</a>
<a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">P&aacute;gina 2</a>
<a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">P&aacute;gina 3</a>
</div>
<div id="contenido">
</div>
</body>
</html>

Así finalizamos con la realización de este paginador (TabPage) al cual nombré TabPageR. Pueden descargar el código, como también puede ver un ejemplo en la sección Ejemplos.

Este proyecto ha sido probado con Internet Explorer, Mozilla, Firefox y Opera.