WebTaller - Aprender DHTML - Objetos Tabs

Objetos Tabs

Este objeto crea UI tabs, para que puedas cambiar entre ellos y activar otras funciones JavaScript - este funciona de lo mejor como para navegar para cargar paginas en el Scroll.

Constructor

Tabs(x,y,width,height)

Se encuentran bastantes imágenes envueltas en producir los Tabs. Si deseas hacer los colores a tu gusto y estilos de los tabs, debes de abrir todas las imágenes que estoy utilizando (llamadas tabs-xxxxx.gif en el directorio de imágenes en el DynAPi).

Las dimensiones y directorio para las imágenes son definidas en el método setImages():

setImages(sepW,startW,endW,buttonW,imgDir)

sepW - el ancho de la separación de la imagen entre cada artículo
startW - El ancho de la primera orilla de la imagen de los tabs
endW - el ancho de la primera última orilla de la imagen de los tabs
buttonW - El ancho de cada uno de los botones flechas
imgDir - El directorio en donde las imágenes son guardadas, debe de ser el mismo que mi nombre de ficheros (ver en el directorio de imágenes DynAPI)
En orden para iniciar el objeto Tabs utilizando mis imágenes, debes de utilizar el siguiente llamado para fijar las imagenes setImages() (el directorio es dependiente):

mytabs.setImages(5,3,3,16,'../.../dynapi/images/') // fijar el directorio de imagenes dynapi

Agregando articulos

addItems(text1,text2,text3....)

Los parámetros están en el texto html que será mostrado

Dependiendo en el ancho de los artículos en los Tabs, tendrás una exhibición diferente. Si estos son mas largo que el ancho total del Tab, debes tener 2 fechas para que puedas hacer scroll para atrás y para adelante:

Si estos son mas pequeños, tendrás una imagen /capa la cual es estirada al ancho que mandaste al constructor (le llamo la capa extendida):

Propiedades
selectedIndex
El índice del articulo que esta actualmente seleccionado, inicialmente este valor es nulo. Si fijas de nuevo este valor antes de que lo actives, este automáticamente seleccionará él articulo cuando es activado.
items[x].text
Devuelve los parámetros de texto del artículo x . Note: que hay un simple   antes y después de este valor para darle espacio a los próximos artículos.
Controlador de Eventos "Event Handling"
Para ejecutar estas funciones cuando un articulo ha sido seleccionado, implementa el controlador onSelect :

mytabs.onSelect = myTabsHandler

function myTabsHandler() {
alert('you selected item '+this.selectedIndex+' ('+this.items[this.selectedIndex].text+')')
}