El NewsTicker es un DHTML reemplazador para esos ticker tape applets que encuentras en los sitios web de noticias. En una pequeña cantidad de código puedes encontrar un widget que se puede cambiar el cual mostrará una capa (un tipo de noticias), y luego se deslizará en una capa nueva (las noticias siguientes) para que lo reemplace.
Constructor
NewsTicker(x,y,width,height)
Es un objeto bastante fácil. Tienes una capa rectangular en la cual pones tus artículos nuevos. El objeto no tendrá el mismo ningún controlador de desborde así que tienes que ajustarlo para que el contenido que le pongas entre en las dimensiones que escojas.
Para agregar noticias a un NewsTicker utiliza el método addItem():
myticker = new NewsTicker(50,50,200,200)
myticker.addItem('this is the content of <br>my first news item')
myticker.addItem('this is the content of <br>my second news item')
myticker.addItem('this is the content of <br>my third news item')
El contenido es justamente agaregado como una Tira (String). Así que puedes poner cualquier tipo de contenido que desees, incluyendo Hiperlinks, imágenes, etc. También puedes fijar variables a las tiras y hacer agregados de esta forma:
var item0 = 'this is the content of <br>my first news item' var item1 = 'this is the content of <br>my second news item' var item2 = 'this is the content of <br>my third news item' myticker = new NewsTicker(50,50,200,200) myticker.addItem(item0) myticker.addItem(item1) myticker.addItem(item2)
Después de que los artículos son agregados, tienes que construir() "build()", escribirCSS() "writeCSS()", y activar() "activate()".
Ejemplo: newsticker1.html [fuente] - un ejemplo simple de NewsTicker
| Nombre de la Propiedad | Descripción | Default |
| nombre | Guarda el nombre utilizado por todas las capas | |
| w | el ancho de las capas | |
| h | el alto de las capas | |
| inc | el incremento en pixeles cuando se desliza | |
| ligereza (speed) | la repetición atrasada en milesegundos | 30 |
| pauseLength | el tiempo en milesegundos para mostrar los artículos antes de que cambie a las siguientes | 3000 |
| fromX | X la posición inicial para las capas con un artículo | 0 |
| fromY | Y la posición inicial para las capas con un artículo | h (el alto) |
| bgColor | color de fondo para las capas | nulo/transparente |
| this.items[i].text | contiene el valor enviado para cada artículo ( esto no se puede escribir de nuevo) | nulo |
| Nombre del Método (Method Name) | Descripcion |
| construir() "build()" | conjunta las propiedades css y div para crear las capas necesitadas |
| activate(autostart) | Asigna todas las DynLayers y toma la importante información para permitir que el objeto funcione. El parámetro autostart es un valor bolean (verdadero/falso) ya sea que desees comenzar tu NewsTicker en movimiento o no cuando esta activado. El default lo comenzara él mismo (autostart) entonces solamente necesitarás utilizarlo si no deseas que este comience automáticamente. |
| addItem(String) | Agrega un nuevo artículo al ticker |
| comenzar() "start()" | comienza los movimientos del NewsTicker |
| parar() "stop()" | para los movimientos del NewsTicker |
| Nombre del DynLayer (DynLayer Name) | Descripcion |
| lyr | la capa mas alta del ScrollWindow |
| items[i].lyr | capa para cada artículo |
Mas en los valores fromX y fromY
Notarás que en el primer ejemplo que cada artículo se deslizó por la parte de abajo por default. Los defaults deX (fromX) es 0, y el default deY (fromY) es la altura que escoges del NewsTicker. Todas las capas comienzan en el punto, y se deslizan a la posición relativa (0,0) a la capa principal del NewsTicker (estas están acomodadas adentro de una capa transparente). Si tu deseas deslizarlo por la parte de arriba puedes fijar de nuevo el deY (fromY) a -100 (comenzará a -100 y se deslizará a 0). Probablemente desearas fijar estos valores que sean los mismos que el valor del ancho/alto.
Ejemplo: newsticker2.html [fuente] - un ejemplo con los valores fijados deX y deY (fromX and fromY), y con los controles comenzar, parar.
| Home | Próxima lección : Lista Objeto |