Tabbar - Excelente control ajax para añadir un contenedor mediante tabs o pestañas en tu página o aplicación web.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Tabbar es un excelente control que hace uso de ajax, y permite a cualquier webmaster o programador web, añadir un contenedor mediante tabs o pestañas. Es muy completo, contiene varias opciones interesantes y posee una muy buena interfaz gráfica.

Aunque el control se distribuye en dos versiones, una versión gratuita y Open source, y otra versión profesional o de pago, la versión gratuita de todas formas contiene la mayoría de las opciones disponibles.

Este tipo de controles resulta cómodo para varios casos, por ejemplo para cargar y visualizar detalles de una tabla ( Clientes, proveedores, compras, ventas etc ..), o para cualquier otro uso en el que necesitemos, en un espacio concreto o reducido de la página, mostrar al usuario información de forma ordenada.

A continuación puedes ver una vista previa del mismo y las características principales.

Mas información sobre el programa.

Indice - Contenido.

  1. Características y funciones.
  2. Vista previa del control Tab.
  3. Inicializar el control y añadirlo en la página web y ejemplos.

 

1 - Características y funciones.

dhtmlxTabbar es un control de fichas o tabs, diseñado en JavaScript y Ajax, para crear interfaz de navegación dinámica mediante pestañas.

El control es muy fácil y simple inicializarlo para poder mostrarlo dentro de la página o aplicación web. Sólo basta con asignar los elementos de la página, por ejemplo un DIV, para las etiquetas del dhtmlxTabbar, y automáticamente va a hacer todo el trabajo por si solo.

Estas son las características principales:

  • Es multiplataforma, se puede visualizar correctamente en todos los navegadores web de la actualidad, y tiene soporte XHTML.
  • Control total vía programación mediante su API ( En lenguaje Javascript/Ajax)
  • Cargar contenido mediante Ajax o utilizando Frames.
  • Los Tabs se pueden orientar en la parte superior, a los costados o en la parte inferior.
  • Soporte XML.
  • Completamente personalizable. se puede modificar fácilmente el aspecto y apariencia. También utilizando Skins.
  • Tabs multilinea ( Esta opción no es soportada en la versión gratis)
  • Fácil implementación del control en la página web.
  • Se pueden añadir, eliminar y editar y controlar las pestañas del control utilizando métodos o funciones.
  • Ajustar el tamaño de los tabs al texto de forma automática.
  • Soporta Datasource desde ficheros XML.

 

2 - Vista previa del control para tabs.

Esta es una vista previa del control junto con sus pestañas. como se ve en la imagen, es posible añadir una fila de pestañas en la parte superior y también al costado o debajo del contenedor.

3 - Inicializar el control y añadirlo en la página web y ejemplos.

En la carpeta de descarga, hay varios ejemplos que muestran su uso e instalación. Los ejemplos se encuentran en la carpeta dhtmlxTabbar\dhtmlxTabbar\samples.

El primer ejemplo muestra como:

  • añadir los archivos de script en la sección HEAD de la página web: archivo CSS, y dos archivos javascript ( dhtmlxcommon.js y dhtmlxtabbar.js). También añadir los divs que forman las pestañas o fichas del control.
  • inicializar el control.
  • Establecer el skin con el método setSkin.
  • Añadir y crear los tabs mediante el método addTab.
  • Establecer el contenido HTML en cada una de las pestañas con el método setContent.
  • establecer la pestaña activa con setTabActive.

Vista previa del ejemplo.

En cada una de las páginas de ejemplos, también puedes ver en el apartado source, el código fuente.

Nota: también en la misma carpeta hay varios ejemplos que muestran como inicializar el control desde XML, HTML, Frames, y Ajax.

Manipular el control.

La carpeta con el ejemplo 2 ( Manipulation) contiene 5 ejemplos que muestran como:

  • Navegar las pestañas desde Javascript utilizando métodos, es decir pode posicionarse en una pestaña concreta, averiguar cual es la pestaña actualmente seleccionada etc ..
  • Cambiar el label o texto del tab, deshabilitar o activar una pestaña, y ocultar y mostrarla.
  • Añadir y eliminar fichas.

Vista previa.

Nota: Hay muchos otros ejemplo en la carpeta samples, por ejemplo.

  • Cómo modificar y cambiar la apariencia.
  • Como integrarlo con otros controles: DataGrids, TreeView, datagrid, ToolBar, control acordeón etc ..
  • Cambiar la orientación.
  • Añadir un botón cerrar para cada una de las pestañas.
  • entre otros.

Requerimientos de instalación y uso.

Requiere: ver requerimientos en la web del autor.


Videos tutoriales.

No hay videos para este script.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://dhtmlx.com
Licencia:
Gratis - Software libre GPL
Versión:
2.6
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: