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

Ejemplos:

mytabs.addItem("Item One","Load Page","Hide mylayer")

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+')')
}

Ejemplo: tabs1.html [fuente] - muestra dos tabs uno con las fechas y uno sin las fechas

Ejemplo: tabs2.html [fuente] - Utiliza el tab para cambiar entre los blocs en linea y un Scroll2

Fuente de Código

tabs.js

Casa

copyright 1998 Dan Steinman