En esta sección explicaré algunas de las situaciones más complejas con las cuales te puedes encontrar si planeas en utilizar extensivamente el scroll.
El método cargar puede ser utilizado en cualquier momento para cargar una página nueva dentro de una ventana de scroll. Solamente utilízala como antes:
myscroll.load(url)
He incorporado un simple sistema de historia dentro del objeto scroll, así que podrás devolverte, avanzar y recargar. Utilizando estos comandos podrás imitar la funcionalidad básica de un web browser. Esto es bastante útil si planeas de utilizar los objetos scroll como la base de un entero sitio web, o como el comienzo a una aplicación server-side (sí este tipo de cosas son posibles con este código).
Los métodos para navegar la historia son muy directos:
objectName.back() objectName.forward() objectName.reload()
El método recargar "reload()" solamente leerá otra vez los contenidos del scroll si fijas los tags META en el fichero para que este no se quede en reserva. Se puede hacer de esta forma:
<META HTTP-EQUIV="expires" CONTENT="0"> <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
Puedes devolver al URL actual mostrado en el scroll con solo utilizar la propiedad url (ej. myscroll.url)
Ver demo-methods.html for a navigation scroll example. Fuente de Codigo.
En IE hay dos formas para iniciar el scroll - buffered o no-buffered. Esto es fijado al utilizar la propiedad usebuffer.
objectName.usebuffer = false //por default es verdadero
Este tópico fue originalmente utilizado en la lección Cambiando Fuente . Si el usebuffer es fijado a verdadero (por defaul)t, el scroll utilizará un IFRAME como buffer para los contenidos del scroll. El contenido que resultará en la ventana scroll será un reflejo de espejo de la página actual. Este anula algunos problemas de presentación como transparencia. Como sea esto hace utilizar JavaScript en el contenido de las páginas un poco difícil. Si deseas hacer JavaScript complicados adentro de la ventana del scroll de los ficheros externos, talvez preferirás fijar la propiedad usebuffer a falso. Esto hará la presentación del scroll como el contenido actual del fichero HTML - esta muestra al IFRAME directamente. Esto hace menos pesado para ti para hacer cosas más complejas en las páginas de contenido. Esto no será menos difícil porque casi siempre tendrás que separar a los comandos porque en IE la página será en frames, pero en Netscape la página no será en frames. No he hecho muchas pruebas de como las cosas deben de trabajar, así que si deseas experimentar tu mismo, lo tienes que hacer solo.
Ficheros Externos para objetos non-buffered:
las páginas con contenido deberán de seguir un formato un poco diferentes.
si un parienteScroll (parentScroll)parent.myscroll.writeContent(document)
Un machote fácil de seguir aparecerá así:
<HTML> <HEAD> <TITLE>Text 2</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- if (parent.Scroll) parent.myscroll.writeContent(document) //--> </SCRIPT> <STYLE TYPE="text/css"> <!-- CSS Styles van aquí --> </STYLE> </HEAD> <BODY onLoad="if (parent.Scroll) parent.myscroll.activate()"> <DIV ID="content"> Contenido HTML va aquí </DIV> </BODY> </HTML>
Ver demo-nonbuffer.html para un ejemplo simple mostrando un scroll no-buffered. Ver Fuente de Código
Capas en Scrolls en línea:
Si planeas en trabajar con capas adentro de un Scroll debes de estar a tanto de lo que envuelve actualmente las capas.
Jerarquía del Objeto Scroll a Capas Contenidas:
Para cada Scroll que tus creas hace un índice nuevo, el primer scroll que hagas será llamado Scroll0, el próximo es Scroll1 y así continua.
Cualquier capa adentro de un Objeto Scroll será acomodada tres veces. Para iniciar una capa cuando estés utilizando en scroll en línea es bastante fácil porque el último DynLayer conocerá la jerarquía de su capa. Solamente inicia la capa con su ID:
mysublayer = new DynLayer("mysublayerLyr') (mysublayerLyr está adentro del scroll)
O si llamas tu capa con una extensión 'Div', la función DynLayerInit() automáticamente asignara el DynLayer a esta.
Ver demo-sublayers-inline.html para un ejemplo de un sublayer en línea . Ver Fuente de Código .
Capas en Controles Externos:
Utilizando capas en ficheros externos es una historia diferente. Es relacionado de como he fabricado el DynLayer. La función DynLayerInit() olfatea a través de todas las capas en el documento y automáticament asigna DynLayers a las capas con 'Div', y prepara todos los parámetros nestref para ser utilizados cuando se les han asignado manualmente la nueva DynLayer. Esto solo ocurre para las capas que se encuentran actualmente en la jerarquía del documento.
Cuando cargas páginas de un fichero externo, estás incorporando capas nuevas dentro de la página que no esta adentro de la jerarquía original. Por lo tanto cualquiera capas las cuales tienen también una extensión 'Div' no serán encontradas automáticamente. Para iniciar estas capas tienes dos opciones.
Opción 1: Llama a la función DynLayerInit().
Esta función opcional es una solución fácil. Cuando llamas a la función DynLayerInit() esta incorporara las capas nuevas las introducirá y automáticamente les asignara el nombre con un 'Div'.
function setSubLayers() {
DynLayerInit()
}
Opción 2:Asigna manualmente las DynLayers
Ligero, pero una forma un poquito más molesta para asignar las sublayers es de mandar al constructor DynLayer() la información necesaria para iniciar este, en otras palabras, manda a este el parámetro nestref.
Como he mostrado anteriormente, el Scroll tiene su propia jerarquía de capas la cual debes estar al tanto. Como sea, una propiedad de construir adentro en el Objeto Scroll hará esto más fácil. El parámetro contentRef del Scroll devolverá el parámetro nestref que tu utilizas para iniciar cualquier capa adentro de este:
mysublayer = new DynLayer('mysublayerLyr',myscroll.contentRef)
Ver demo-sublayers-external.html para un ejemplo de una sublayer externa. Ver Fuente de Código.
Definiendo CSS para Capas Externas Buffered :
Una de las desventajas de utilizar un scroll beffered (default) es que IE solo transfiere el HTML en el cuerpo del documento. Este no transfiere ningún CSS si las defines en un tag Style. Entonces tienes dos escogencias:
1. Definir tus CSS en el documento principal
2. Definir tus CSS utilizando el STYLE en línea. Recuerda un poco mas atrás en la lección Capas Añadidas Donde paré de utilizar styles en línea. La razón de esto fue de que causa conflictos en Netscape cuando tratas de hacer capas añadidas mas de una vez. Si no necesitas mas que un conjunto de capas añadidas, esta es una opción que se puede alcanzar, y también trabaja.
En cualquier caso, una vez que las capas están presentadas estarás en capacidad de llevar a cabo tu propósito con estas como lo hicieras si estas estuvieran en línea. El único truco es que tendrás que llamar una función separada de los ficheros externos la cual iniciará la capa. El código en el ejemplo será ilustrado así.
Capas en Ficheros Externos Incorporadas a Scrolls No-Buffered : (que te parece esto como un vocabulario DHTML)
En este caso, no hay diferencia para Netscape. Pero en IE el contenido es en un Frame. Esta es la razón principal la cual he incorporado un parámetro frame dentro del DynLayer. Esto es para que puedas hacer tus propósitos con las capas que están localizadas en otro marco "frame". En este caso absolutamente debes de definir manualmente un DynLayer - DynLayerInit() no lo encontrará automáticamente.
if (ie4) objectName = new DynLayer(id,nestref,iframe)
Dale un vistazo demo-sublayers-nonbuffer.html para un ejemplo non-buffered . Ver Fuente de Código.
En general, no es posible de ni siguiera molestarse si no lo haces con el scroll no-buffered.
Haciendo que JavaScript llame al documento scroll principal:
Si deseas llamar una función en el documento principal, por ejemplo si deseas tener un enlace adentro de la página con contenido que carga una página nueva, tendrás que llamar al objeto scroll utilizando pariente "parent". Esto es porque en IE la página esta en un marco - utilizando pariente este encañonará al marco mas alto, el que está con el objeto scroll. Esto también funcionará en Netscape.
<A HREF="javascript:parent.myscroll.load('newpage.html')">load page</A>
Haciendo a JavaScript llamar a la página con contenido:
Primero que todo, si llamas a una función con un enlace podrás utilizar.
<HREF="javascript:functionName()">link</A>
En lugar debes utilizar:
<A HREF="javascript://" onClick="functionName()">link</A>
Ahora si la función necesita ganar acceso a los elementos en la página con contenido, por ejemplo para presentar una forma, necesitaras saber la referencia del documento de esos elementos. Debes de encañonar la forma en acuerdo con su verdadera jerarquía para Netscape
si (ns4) document.Scroll0.document.Scroll0TextC.document.Scroll0TextT.document.yourform
Una forma fácil de trabajar alrededor de esto es de pasar el objeto documento a esa función. Luego utiliza ese documento para trabajar con los elementos de la página. Otra vez esto funciona en los dos Netscape y IE así que es la mejor solución de utilizar.
Un ejemplo de una Función:
function submitForm(doc) {
doc.myform.submit()
}
Para HTML llamar esta función debe ser así:
<A HREF="javascript://" onClick="submitForm(document)">submit</A>
Ver demo-javascript.html para un ejemplo el cual utiliza JavaScript en la página de contenido. La fuente de código de esta página no es nada nueva, pero dale un vistazo a la fuente de código en la página de contenido (text-javascript.html) - Allí es donde estos trucos ocurren.
Fácilmente puedes tener scrolls múltiples en la misma página. Esto es hecho mucho mas fácil con esta nueva versión de Scroll.
Ver demo-frames.html Para múltiple ejemplos de Scroll que se comunican ellos mismos. Ver fuente de Código.
Con el cambio que he hecho al objeto Scroll y DynLayer, haciendo en Scroll acomodada (un scroll adentro de otro scroll) es muy simple. Dale un vistazo al código en el ejemplo siguiente para que veas de como esta hecho.
Como sea ahí se encuentra un bicho en Netscape el cual no he podido deshacerme. La demostración de abajo funcionará, pero solo la primera vez que veas a la página. Si recargas la página, solo aparecerá la parte de la barra de scroll para el último scroll. Si te devuelves, y presionas al enlace otra vez, este funcionará de nuevo... Aarrrggg!!
Ver demo-nestedscroll.html para un ejemplo nested scroll. Ver Fuente de Código.
| Casa | Próxima Lección: Objeto Lista |