Un TabPage con AJAX desde cero

10
2201

tabpageDespué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).

esquema

  • 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.

10 COMENTARIOS

  1. Hola amigo,s en realidad todos los ejemplos de ajax estan muy buenos, pero deberiamos tener una seccion que se puede llamar“Ajax desde cero”, “Ajax Para Principiantes” o algo por el estilo,por que habemos muchos programadores que nos gusta conocer un lenguaje o herramientas desde el popular “Hola Mundo”, o si se les hace muy dificil colocar un manual o pedir ayuda.

    yo puedo ser traductor de algunos manuales o facilitador de cursos y manuales, si empre y cuando ustedes marquen la linea directiva de como seria el procedimiento, buen en fin para conocer a jax no solo basta saber javascrip y php y probar con los ejemplos super funcionales que aqui aparecen, necesitamos empezar desde cero, explicar linea a linea que hace cada instruccion y como funcionan y se enlazan las cosas, si hacemos eso por parte le podemos sacar el maximo provecho a esta poderosa y super utilizada herramienta.

  2. La razón por la que empece tan rapido, es que ya habia muchos sitios explicando los procesos iniciales de ajax, y por ello me salte esa parte, simplemente hize una intro rapida y luego un ejemplo, para luego a pasar con php y mysql. Tiene razon a lo de ir desde cero, ya lo han mencionado al correo y por los comentarios. Así que esta en mente: una introducción 100% para principiantes, pero la pregunta es ¿desde donde es “cero”?. Si deseas aportar con ideas hazlo al correo, serán bienvenidas. risas

  3. BAJE EL EJEMPLO Y NO FUNCIONA EN MI COMPUTADOR MODO LOCAL SUBI LOS ARCHIVOS A MI FTP Y SI FUNCIONAN PERO ME PODRIAN EXPLICAR POR QUE EN MODO LOCAL NO FUNCIONAN ???
    MIL GRACIAS

  4. baje tu codigo, pero necesito saber porque no me carga el contenido de las paginas, pagina1, 2 y 3
    no lo pone, no carga lo que hay en esos html

  5. A mi me ha funcionado perfectamente para lo que queria, asi que muchas gracias.
    Al principio no me cargaba el contenido de las páginas al igual que le ha pasado a un ‘user’ por ahi que he leído en los comentarios, para mi tan solo fue indicarle la ruta correcta a las páginas donde las tenia cargadas en el servidor, me refiero a esto:

Comments are closed.