El objeto ScrollWIndow es una pieza de código muy versátil el cual se ocupa de cargar los ficheros dentro de las capas. Si has utilizado antes el widget original Scroll , vas a reconocer muchas de la funcionalidad de este objeto. Fue específicamente construido para mi nuevo widget Scroll2, pero ciertamente puede ser utilizado el solo.
Lo que hace este componente es de dibujar algunas capas y proveer toda la funcionalidad que necesitarás cuando sé esta trabajando con paginas externas. No tiene ningún mecanismo de scrolling, como el objeto scroll hace, como sea te da toda la información y los ganchos que necesitas para crear uno. El widget Scroll2 utiliza enteramente estos ganchos para controlar el contenido dentro del ScrollWindow. Si deseas hacer un mecanismo de Scrolling un poco loco ( un nudo que da vueltas ha sido mencionado) este es el objeto en el cual quieres basarte.
También puedes utilizarlo para una contenido enlínea (contenido el cual es en la misma página que el mismo ScrollWindow) de una manera mejor. Puedes tener múltiple blocs enlínea, y también cargar un montón de blocs enlínea todos de una página externa! De esta forma ligeramente puedes hacer TAB sobre varios blocs de contenido y tener el contenido ya cargado en lugar de cargar cada pieza de información que venga de un fichero externo como en el previo widget Scroll.
Como siempre el ScrollWindow prosigue la secuencia de build-writeCSS-writeDiv-activate. Como sea el método activar es muy especial en este circunstancia. Tienes que llamar solamente el método activate() normalmente si estas utilizando el contenido enlinea (lee abajo). Si cargas paginas externas dentro del ScrollWindow tienes que hacer el llamado al método activate() de una página externa, no de la página que se encuentra el ScrollWindow, (ie. no actives de la función init() .
El Constructor
objectName = new ScrollWindow(x,y,width,height,frame,name)
Los primeros cuatro son obvios, frame and name los dos son opcionales .
El ScrollWindow tiene soporte entero para Marcos (Frames). Esto era una característica que ha sido pedida y ahora la tienes. Tienes que mandar el nombre del marco como una Tira:
mywindowinaframe = new ScrollWindow(50,50,200,200,'myframename')
Pero hay mucho mas en trabajar con Marcos, asíq que continua leyendo...
El parametro name Es solamente una forma de forzar todos los div´s que será escrito para que estos tengan un nombre único. Si no mandas un nombre al parámetro el ScrollWindow escogerá el mismo, cada Scroll window tendrá un índice y escribe todos los div´s con ese índice, el primero será llamado ScrollWindow0, el siguiente ScrollWindow1, y así continua. Si deseas que todas las capas sean llamadas con algo diferente, tienes que darle una tira como en el 'myscrollLayers' o lo que sea. Pero estés seguro (a) que el nombre que utilizas no sea exactamente el mismo que el objeto, sino recibirás un error JavaScript.
Mas que todo esto viene de formas en las lecciones Scroll y Scroll2 de cargar los ficheros así que seré muy ligero. Debes de solamente llamar el método load() y pasar cualquier nombre de fichero que desees:
mywindow.load('myfilename.html')
Este fichero debe de contener el controlador onLoad el cual llama de vuelta al objeto ScrollWindow para activarlo.
<html> <head> <title>My External Page</title> </head> <body onLoad="parent.mywindow.activate()"> el contenido de mi pagina va aquí </body> </html>
Ejemplo: demo-external.html [fuente] - muestra un scrollwindow que carga a un fichero externo
Paginas Externas cuando se utiliza Marcos (Frames)
Si tu ScrollWindow se encuentra en un marco, y cargas una pagina externa tienes que hacer el llamado de activate() con window.top.yourframename.yourscrollname.activate(), Por ejemplo si tu marco es llamado mimarco "myframe", y tu scrollwindow es llamada miventana "mywindow", tu pagina externa aparecera así:
<html> <head> <title>My Title</title> </head> <body onLoad="window.top.myframe.myscroll.activate()"> el contenido de mi pagina va aquí </body> </html>
Buffering y Non-Buffering de las paginas externas
Como en el original scroll widget, el ScrollWindow será por default "buffer" a una pagina externa. Lo que esto hace es escribir los Iframes escondidos, y utiliza eso para que sea un espejo de los contenidos de la pagina a una capa vacía en una pagina. Esto quita bastante de los problemas con Iframes´s, pero crea otros problemas. La pagina funciona mejor si el contenido es estático - imágenes, texto y así sigue. Si tienes formularios y capas y una montaña de Javascript que deseas hacer en una pagina externa será mejor que no utilices esta característica buffer. You can turn it off by doing:
mywindow.usebuffer = false
Esto hará que el ScrollWindow escriba un Iframe que no se encuentra escondido, la pagina que cargas con el método load() simplemente cambiara la localización del Iframe a un URL.
Una pagina non-buffered necesita tener una capa adentro porque el ScrollWindow necesita de estar dispuesto de mover esta capa alrededor, y entonces todo el contenido de la pagina también. Esta capa puede ser creada con insertar el contenido en rojo.
<html> <head> <title>My External Page</title> <script language="JavaScript"> parent.mywindow.writeContent() </script> </pre> </head> <body onLoad="parent.mywindow.activate()"> <div id="content"> el contenido de mi pagina va aqui </div> </body> </html>
Cosas que hay que notar cuando se utiliza non-buffering:
Si hay una situacion donde no necesitas que el contenido que venga de otro fichero puedes utilizar esta forma opcional para escribir los div´s para el ScrollWindow:
<script language="JavaScript"> document.write(mywindow.divStart) </script> mi contenido enlinea va aquí <script language="JavaScript"> document.write(mywindow.divEnd) </script>
Esto es bastante bueno particularmente que la pagina ha sido auto-generada por un script de algún estilo.
Ejemplo: demo-inline.html [fuente] - Muestra el scrollwindow con el contenido enlinea
Blocs multiples con contenido es una nueva característica que he introducido dentro del Scrollwindow y a la vez esta soportada por el objeto Scroll2. Digamos que tienes 3 o 4 piezas de contenido que deseas cambiar entre ellos ligeramente. Si has hecho a cada uno de estos en paginas separadas y un load() para traer cada uno de ellos en una demanda, tienes que esperar para que el browser vaya al servidor de nuevo y recoger ese fichero. Bueno, la opción del múltiple blocs lo hará sin problema, Te permite tener bastantes piezas con contenido enlinea
Para fijar esto debes de decirla al ScrollWindow cuantos blocs tendrá que tener. Debes de hacer esto después de que se defina, y antes de que lo construyas:
mywindow = new ScrollWindow(200,50,250,200)
mywindow.inlineBlocks = 4
mywindow.build()
Blocs EnLinea
Ahora, cuando estas escribiendo los div´s tendrás que manualmente poner en conjunto los tags DIV para cada bloc. Si no utilizas el parámetro name entonces no tiene mas que formalizar esto. Para tu primer ScrollWindow tus div´s se verán así.
<script language="JavaScript"> document.write(mywindow.divStart) </script> <div id="ScrollWindow0Block0"> This is the first block </div> <div id="ScrollWindow0Block1"> This is the second block </div> <div id="ScrollWindow0Block2"> This is the third block </div> <div id="ScrollWindow0Block3"> This is the fourth block </div> <script language="JavaScript"> document.write(mywindow.divEnd) </script>
Obviamente estos son indexados, así que los números comienzan por 0, y terminan con inlineBlocks menos 1. Si no haces esto correctamente tendrás un error.
Ahora si utilizas el parametro name tienes que utilizar ese nombre en lugar de la parte ´ScrollWindow´ para esos Div´s. Si llamas esos 'mywinLayers', tus blocs serán 'mywinLayersBlock0' y así seguirá.
Blocs Externos
Te he permitido que tengas blocs enlinea que vengan de una pagina externa (external blocs enlinea? :) le llamo la multicaracteristica externa, pero realmente no hay diferencia a tu código, excepto que no escribes los blocs en tu pagina principal.
<script language="JavaScript"> document.write(mywindow.div) </script>
En lugar tienes que poner esos mismos blocs DIV's adentro de una pagina externa:
<html> <head> <title>external page, with multiple inline blocks</title> </head> <body onLoad="parent.mywindow.activate()"> <div id="ScrollWindow0Block0"> This is the first block </div> <div id="ScrollWindow0Block1"> This is the second block </div> <div id="ScrollWindow0Block2"> This is the third block </div> <div id="ScrollWindow0Block3"> This is the fourth block </div> </body> </html>
Luego tendrás que cargar esta pagina externa como normal con el método load().
Cambiando entre blocs.
Pro default el bloc 0 será mostrado, todos los otros estarán escondidos. Para cambiar cual es el que se muestra tienes que utilizar el método showBlock():
mywindow.showBlock(2) // send the index of the block you want to show
Ejemplo: demo-multi.html [fuente ] - blocs enlinea
Ejemplo: demo-ext-multi.html [fuente] - blocs externos
| Nombre de la Propiedad | Description |
| nombre (name) | guarda el nombre para todas las capas |
| w | el ancho de la ventana |
| h | el alto de la ventana |
| frame | apunta al marco en que la ventana se encuentra (eg. parent.yourframe) |
| border | el tamaño de la orilla para poner alrededor el contenido, defaults a 1 |
| borderColor | default es 'black' |
| bgColor | default es nulo (transparente) |
| url | guarda la pagina actual en localización |
| usebuffer | bolean ya sea que si o no para utilizar la característica buffer, default es verdadero |
| inlineBlocks | numero de blocs enlinea que el contenido tendra |
| inc | el numero de pixeles para mover cada a su tiempo es scroll cuando (arriba, abajo, izquierda,derecha ( up,down,left,right) estos metodos son utilizados), defaults a 10 |
| speed | la ligereza en millesegundos para que el contenido haga scroll |
| contentWidth | ancho del contenido de la ventana |
| contentHeight | altura del contenido de la ventana |
| offsetWidth | diferencia entre el contentWidth y el ancho de la ventana |
| enableHScroll | Bolean ya sea que el contenido es mas ancho que la ventana (si este puede hacer scroll horizontalmente) |
| enableVScroll | Bolean ya sea que el contenido es mas alto que la ventana (si este puede hacer scroll verticalmente) |
| Nombre del Métododo | Descripción |
| build() | agrupa todas las propiedades css y div para crear las capas necesitadas |
| activate() | asigna todas las DynLayers y recoge la información importante para permitir que el objeto funcione |
| up() | Comienza a hacer el scroll en el contenido de la ventana hacia arriba |
| down() | Comienza a hacer el scroll en el contenido de la ventana hacia abajo |
| left() | Comienza a hacer el scroll en el contenido de la ventana hacia la izquierda |
| right() | Comienza a hacer el scroll en el contenido de la ventana hacia la derecha |
| stop() | Para a todas las acciones de scrolling, cancela los metodos arriba(), abajo(), izquierda() y derecha() "up() down() left() or right()" |
| getXfactor() | Devuelve el valor entre 0 y 1 ajustando con x-posición del contenido. 0 significa que esta a los límites de la izquierda, 1 significa que esta en los límites de la derecha. |
| getYfactor() | Devuelve el valor entre 0 y 1 ajustando con y-posición del contenido. 0 significa que esta a los límites de la arriba, 1 significa que esta en los límites de la abajo. |
| load(url) | Carga una pagina dentro de la ventana |
| reload() | un método interno para cargar de nuevo la actual pagina externa |
| back() | carga la pagina anterior en el ScrollWindow's constructor de historia |
| forward() | carga la pagina siguiente en el ScrollWindow's constructor de historia - si no hay una pagina a disposicion este no hará nada |
| showBlock(i) | muestra un particular bloc enlinea |
| setMargins() | antes de que construyas()"build()" el objeto puedes fijar los cuatro margenes (izuierda,derecha,arriba,abajo),por default estos son 0 |
| Nombre del DynLayer | Descripción |
| lyr | la capa mas alta del ScrollWindow |
| blocklyr[] | array del multiple bloc de capas en caso de que hay algunas |
| screenlyr | guardador de lugar para una capa para su contenido ( esto es para formatizar apropiadamente, usualmente no te tendrás que preocupar por eso) |
| contentlyr | la capa que actualmente contiene el contenido externo o enlinea, capas de múltiples blocs serán acomodadas adentro de esta capa. Esta es una capa ha sido movida hacia arriba, abajo, izquierda o derecha cuando se hace scroll. |
El Evento onScroll
El evento Scroll es llamado cada vez que el contenido es scroll, para cada paso que se mueve. Esto te permite que hagas "cosas" cuando el contenido en la ventana ha sido scroll.
mywindow.onScroll = MyOnScrollHandler
function MyOnScrollHandler() {
// code to do stuff when scrolling
}
De esa función puedes hacer acceso a cualquiera de las propiedades y métodos del ScrollWindow, por ejemplo puedes mostrar el estado de los factores x y y:
function MyOnScrollHandler() {
status = "ScrollWindow Factors: x="+this.getXfactor()+" y="+this.getYfactor()
}
Puedes darle un vistazo a la fuente de código del widget Scroll2 y ver como utilizo el controlador de onScroll para realizar el código del scrollbar.
El Evento onLoad
El Evento onLoad es llamado cuando los contenidos son cambiados. Para mas precisión es disparado cada vez que el método activate() es llamado, así que también será llamado cuando utilizas los métodos load(), showBlocks(), back(), o forward() también.
mywindow.onLoad = MyOnLoadHandler
function MyOnLoadHandler() {
alert('the page is done loading')
// code to do stuff when scrolling
}
Utilizando los métodos abajo(), arriba(), derecha(), izquierda() (down(), up(), left(), right() )
Cuando llamas a estos métodos, este activará un llamado de deslizamiento en el DynLayer contentlyr. Una vez que el deslizamiento esta en acción, este deslizara todos los contenidos hacia los límites de la parte de abajo, arriba, derecha o izquierda (dependiendo cual es el que llamas). Puedes parar cualquiera de estas acciones de deslizamientos en cualquier momento con solo llamar al metodo stop().
Para un simple mecanismo para hacer scroll puedes poner hyperlinks en tu pagina, como botones para arriba o abajo o lo que sea. El hyperlink llamado debe de seguir la técnica en la lección del mouse-click-animation :
<a href="javascript://" onMouseDown="mywindow.down(); return false" onMouseUp="mywindow.stop()" onMouseOut="mywindow.stop()">Scroll Down</a>
Using only layers inside the ScrollWindow
En orden para que el ScrollWindow haga scroll sus contenidos tienen que estar disponibles de encontrar los valores contentWidth and contentHeight. Esos son el ancho y el alto del contenido en el contentlyr DynLayer. Como sea en Netscape si solamente tienes capas en tus contenidos, estos valores serán 0, y así no podrás hacer scroll al contneido. En orden de reparar esto puedes manualmente fijar los que desees que los contentWidth y contentHeight sean cuando llames al método activate():
mywindow.activate(500,850) // (width,height)
Ejemplo: demo-methods.html [fuente] - utiliza casi toda la funcionalidad del ScrollWindow
| Casa | Próxima Lección: Objeto ScrollBar |