Objeto Lista

Revisión: agregado la capacidad de mouseOver (el ratón encima), específicamente para el MenuList.

El Objeto Lista es un widget de selección genérica, algo como una Lista de Selección HTML pero mucho más configurable. He creado este objeto con la intención específicamente de que este sea incorporado adentro de widgets más largos y complejos - esta se forma a los principios básicos como otros widgets son creados. Los widgets que he creado cuales utilizan este objeto son Lista de Selección, Lista de Scroll, y Lista de Menu.

Aquí esta como la Lista default aparecerá:

Todos los colores, espacios, letras, y por supuesto los artículos contenidos son cambiables fácilmente. También he incluido código para que así puedas hacer una lista con columnas múltiples, y tener un imagen cambiable adentro de la lista. El último es principalmente utilizado por el Objeto MenuList.

Creando una Lista

objectName = new List(x,y,width,itemH)

El parámetro itemH es opcional. Esto da referencia a la altura y cada artículo en la lista. Para hacer el Objeto Lista un poco mejor, he dejado esto que sea indefinido, y hacer que la lista se produzca automáticamente ella misma de acuerdo con la altura mínima que cada artículo tiene que ser. Esto evita cualquier problema con el tamaño de las letras dentro de plataformas así no importa cuales letras son utilizadas, el texto adentro de la lista estará siempre compacto y igualmente espaciado. La única desventaja para esto es que toma un poquito mas largo para iniciar y nunca podrás saber la altura de la lista. Si fijas el artículoH "itemH" apropiadamente podrás entonces fijar una altura específica.

Ejemplos: 

mylist = new List(30,40,150)  // itemH estara siendo cuidado automaticamente

mylist = new List(30,40,150,30) // cada articulo "item" sera de 30 pixeles de altura

Agregando artículos a la Lista

Para agregar artículos a la lista tienes que utilizar el método add(): 

objectName.add(value,text)

El valor value especificado es de como cada artículo contendrá la data. Esto podrá ser cualquier variable; un número, una tira (como un URL), o hasta arrays y objetos. El texto text será el texto mostrado en la Lista.

Ejemplo: 

mylist.add('index.html','Home')
mylist.add('page1.html','Page 1')
mylist.add('page2.html','Page 2')

Lista de Múltiples Columnas

Este objeto Lista puede ser utilizado para imitar una tabla de artículos con solamente utilizar la característica de múltiples columnas. Para hacer esto debes de añadir en número deseado de los valores de la célula de texto en el método add() también: 

objectName.add(value,text1,text2,text3 etc....)

Debes de fijar los anchos de las columnas antes de que hagas esto. Solamente manda una lista del ancho de los pixeles al método setCols(). Aquí hay un ejemplo: 

mylist = new List(50,50,150)
mylist.setCols(50,50,50)  // 3 columnas, harán el total del ancho
mylist.add(0,'item','0','zero')
mylist.add(1,'item','1','one')
mylist.add(2,'item','2','two')
mylist.add(3,'item','3','three')
mylist.add(4,'item','4','four')

Creando y Activando la Lista

Esto está hecho como todos mis widgets. Llama al método build() cuando hayas terminado de fijar todo, escribe las CSS y Div´s en la página y luego llama al método activate(). Aquí hay un ejemplo completo: 

function init() {
	mylist.activate()
}

mylist = new List(50,50,150)
mylist.add('zero','item 0')
mylist.add('one','item 1')
mylist.add('two','item 2')
mylist.add('three','item 3')
mylist.add('four','item 4')
mylist.build()

writeCSS (
mylist.css
)

// HTML
<script language="JavaScript">
document.write(mylist.div)
</script>

Ejemplo list1.html. [fuente].

Ejemplo list2-multicol.html [fuente] para un ejemplo de una lista con múltiple columnas.

Haciendo la Lista al Gusto

Las propiedades abajo pueden ser utilizadas para cambiar como se ve la lista. Estos son los defaults: 

itemSpacing = 1
fontname = 'Helvetica'
fontsize = 11
visibility = 'inherit'

color.textNormal = '#000000'
color.textSelected = '#FFFFFF'
color.bgNormal = '#E6E6E6'
color.bgSelected = '#0000A0'
color.bgRollover = '#D1D1D1'
color.bg = '#C0C0C0'

Los únicos que son necesarios de explicar son las propiedades itemSpacing y color.bg. El itemSpacing es el número de pixeles que separa a cada artículo en la lista. El color de fondo (color.bg) será un color entre los artículos. Las otras propiedades se explican ellas mismas.

Ejemplo list3-custom.html [fuente]para un ejemplo de una Lista que tiene diferentes colores y cosas.

Otras Propiedades y Métodos

La Lista tiene propiedades y métodos creados adentro de ella, para que puedas utilizarlos en cualquiera ocasión.

Propiedades:

lyr (DynLayer)
un Dynlayer asociado con la capa de mas-alto de la Lista, toda funcionalidad del DynLayer puede ser disponible para la Lista por esta propiedad/objeto
value (cualquier variable)
esto reflejará el valor del artículo seleccionado en este momento
selectedIndex (integer)
El número de índice del artículo seleccionado en este momento
items (array)
un array de todos los artículos, así es como estos estan guardados en el código de la Lista
items[x].selected (boolean)
utilizado para chequear si el artículo "x" ha sido seleccionado
items[x].value (any variable)
el valor del artículo "x"
items[x].text (tira, o un array de tiras)
la tira de texto de los artículos "x", lo que estan visualmente mostrado en la Lista. Si utilizas la opción de columnas múltiples, este valor es un array de todos los valores de texto mandados en el método add()(items[x].text[0], items[x].text[1] etc)
multipleSeleccion "multiSelect" (boolean)
determina si los artículos múltiples pueden ser seleccionados, falso por default (solamente uno puedes ser seleccionado). Nota: cuando esto esta permitido, las propiedades del valor y selectIndex no pueden realmente ser utilizadas porque estas reflejaran solo los artículos que fueron seleccionados de último. Tendrás que alrededor de los items[] array para encontrar todos los artículos seleccionados y los valores apropiados.
permiteDeseleccionar "allowDeselect" (boolean)
determina si no puedes hacer una no selección de un artículo con solo cliquearlo de nuevo, falso por default (una vez que es seleccionado, no puede ser deseleccionado). Este valor no tiene efecto si la opción multiSelect es verdadera.

preSelect (integer)

hará la Lista pre seleccionar un artículo dado cuando es activado

w (integer)

devuelve el ancho de la Lista

h (integer)

devuelve la altura total de la Lista. Si estas utilizando la característica "auto-tamaño" este valor debe solamente de ser utilizado después de que ha sido desactivada.

Métodos:

select(index)
selecciona el artículo dado
deselect(index)
deselecciona el artículo dado
setImage()
explicado abajo

Ejemplo list4-props.html [fuente] para un ejemplo utilizando casi todas estas propiedades, te daré un mejor idea de como utilizarlas.

El Evento onSelect

El evento onSelect es llamado después que un artículo es seleccionado. Usualmente debes de asignar un controlador a este evento para hacer algo como redirigir el browser a un url (el cual debe de ser fijado por los valores de los artículos en la lista). Para asignar el controlador, solamente fíjelo a una función que tu creas: 

objectName.onSelect = myFunction

Esa función vendrá a ser parte del Objeto List y podrás utilizar cualquiera de las propiedades. Como un ejemplo de la función, ya he incluido un controlador para redirigir en el Objeto List ( tu tienes que asignar el controlador manualmente): 

function ListRedirect() {
	location.href = this.value
}

Para asignar este solamente tienes que escribir: 

objectName.onSelect = ListRedirect

Ejemplo list5-redirect.html [fuente] para un ejemplo de redirigir.

La Opción Imagen

He implementado una opción imagen especialmente para el uso en el objeto MenuLista, pero esto puede ser de uso en otro lugar. Lo que esto hace es pegar a una imagen en el lado derecho del artículo, y cambiará a esta con un estado 'selected' imagen cuando cliqueas en ello. Para la ListaMenu, esto usualmente será una imagen de una fecha. Por default esta imagen aparecerá en el lado derecho, pero esto puede ser cambiable si editaras la fuente de código para el Objeto Lista.

Para utilizar esta opción tienes que utilizar dos etapas. Primero tienes que llamar al método setImage(): 

object.setImage(image0,image1,width,height)

Donde:

Ejemplo: 

mylist.setImage('image-off.gif','image-on.gif',20,20)

Después de llamar a este método, debes de asignar la imagen a los artículos que deseas. Puedes hacer esto con solo fijando una propiedad adicional, hasImage, a los artículos que deseas: 

mylist.setImage('image-off.gif','image-on.gif',20,20)
mylist.items[0].hasImage = true

Ejemplo list6-image.html [fuente]para un ejemplo de una imagen.

Este objeto por el mismo es suave, no lo he escrito con la intención de que este sea utilizado individualmente, en lugar para ser utilizado como las bases en otros widgets que tengo en mente. Para ver lo que he hecho para extender este objeto lee sobre este en las lecciones siguientes:

Fuente de Código


list.js

Casa Próxima Lección: SelectList Objeto
copyright 1998 Dan Steinman