Ejemplo: navegación mediante tabs o pestañas y AJAX con JavaScript no intrusivo

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

Descripción

El script es un simple panel de navegación mediante pestañas en el cual las secciones son cargadas desde base de datos mediante AJAX. El código ha sido desarrollado, muy a pesar mio, pensando en la flexibilidad. Los que conocen mis códigos saben que no me gusta desarrollar cosas demasiado configurables para evitar el copiar/pegar y obligarlos a, al menos, tener que analizar el código, pero no es el caso de este script. El sistema es adaptable a cualquier estructura de tablas, o incluso, soporta que las secciones estén en tablas diferentes con estructuras diferentes. En casi todas las líneas del programa hay comentarios para facilitar el aprendizaje; el desarrollo se pensó para que el fuente sea claro de seguir en lugar de super optimizado, asi que queda en ustedes mejorarlo a gusto.
Vale la pena mencionar también que el uso de JavaScript no intrusivo permite que no haya eventos ni códigos JS mezclados con el HTML, ganando claridad en el código (pronto actualizaré los demás ejemplos a esta metodología).

Tab 1
Tab 2
Tab 3
En la capa contenedora pueden cargar texto o también texto con imágenes. Pueden por supuesto armar su estructura de tablas o mejor aún con capas y estilos CSS.
Todos los datos están en una base de datos y pueden estar en distintas tablas con distintas estructuras. También es fácilmente modificable para estructuras XML.
Esta es mi mascota, ¿no es simpática?

Funcionamiento

Al hacer click en una pestaña, se llama a una función JavaScript encargada de obtener el ID de la pestaña activa y vincularlo con el nombre de la sección que se debe cargar. También en ese momento se cambian los estilos de las pestañas para dar la sensación de pestaña activada/desactivada mediante z-index y colores de fondo. El identificador de la sección es enviado al servidor, el cual vincula este identificador con la tabla, fila y columna en la cual debe extraer los datos. Los datos son convertidos a UTF8 para conseguir la visualización de caracteres especiales (acentos y demás) y enviados al cliente en formato HTML puro. El cliente recibirá los datos y los colocará en la capa colocada para mostrarlos mediante innerHTML.

Para obtener los códigos cliqueá aquí.

Comentarios, dudas, sugerencias sobre el ejemplo pueden enviarlas a: edanps@gmail.com. ACLARACION al 12/04/07: Debido a la enorme cantidad de usuarios que están utilizando los códigos en sus sitios sin respetar la licencia correspondiente, por el momento solo daré soporte vía e-mail a aquellos usuarios que yo pueda comprobar que cumplen con los puntos detallados en la misma. CORREOS DE USUARIOS QUE NO SE PUEDA COMPROBAR QUE CUMPLEN CON LA LICENCIA NO SERAN RESPONDIDOS. Gracias por comprender.