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ón de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de está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ón. Espero les sirva. </p> <div id="botones"> <a id="boton_1" onclick="MostrarPagina('pagina1.html','1')">Página 1</a> <a id="boton_2" onclick="MostrarPagina('pagina2.html','2')">Página 2</a> <a id="boton_3" onclick="MostrarPagina('pagina3.html','3')">Pá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.