Para implementar un Objeto Scroll es bastante directo y bastante similar a los otros objetos en esta Guía. Lo que recomiendo es de poner todo el código para el objeto es su fichero.js y nombrar a ese fichero adentro de cualquiera de las páginas que lo utilicen. Desde que el objeto Scroll utiliza DynLayers también debes incluir para este un js.fichero:
<SCRIPT LANGUAGE="JavaScript" SRC="dynlayer.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript" SRC="scroll.js"></SCRIPT>
Iniciación:
Lo próximo que debes de crear es un nuevo instante del objeto (nota que el parámetro nestref no estaba anteriormente presente, este reemplaza la necesidad de un método setNestInfo() ):
objectName = new Scroll(x,y,width,height)
Ejemplos:
myscroll = new Scroll(50,30,350,220) myscroll = new Scroll(null,null,350,220) // relatively positioned
Después de que hayas iniciado al objeto scroll, podrás definir todas las cosas extra especiales que desees (imágenes). Esto se hace con solo nombrar a varios métodos o asignando propiedades nuevas. Esto será explicado mas detalladamente en las próximas secciones. Por el momento brincaré esa parte. Si no pones ningunas cosas extras especiales el objeto asumirá a un grupo de defaults los cuales ya he escogido.
Para presentar a un scroll es como cualquiera de mis otros Objetos. Tienes que hacer la secuencia de construir() "build()", escribir las CSS, escribir el DIV, y luego activar() "activate()" al objeto.
objectName = new Scroll(x,y,width,height) // customize methods go here objectName.build() writeCSS ( objectName.css )
Contenido Externo:
Si deseas utilizar un fichero externo todo lo que necesitas que presentar es el DIV´s al documento.escribir() la propiedad div la cual es una tira larga conteniendo todos los DIV's uno después del otro.
<BODY> <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.div) </SCRIPT> </BODY>
Contenido EnLínea:
Utilizando contenido enlínea, es deseable cuando los contenidos del Scroll no necesitan de ser intercambiados con ningún otro contenido. También utilizando de esta forma la página entera puede ser generada de un server-side script utilizando Perl o C, o posiblemente de una base de datos como SQL o Domino.
Para dirigir a esta necesidad, he incluido dos propiedades separadas las cuales tienes que escribir en el documento: divStart y divEnd. Entre el document.write()'s es donde tienes que insertar los contenidos del scroll:
<BODY> <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.divStart) </SCRIPT> Contenidos van aquí <SCRIPT LANGUAGE="JavaScript"> document.write(objectName.divEnd) </SCRIPT> </BODY>
Inmediatamente después de que las capas scroll ha sido escritas al browser vas a ver un frame cuadrado en donde los contenidos están.
Si utilizas la técnica enlínea "inline" podras también ver todos los contenidos. Para activar la barra de scroll (para permitir que los contenidos se puedan scroll) debes de llamar al método activate() un la función init():
function init() {
myscroll.activate()
}
Está solamente tiene que ser hecha cuando se utiliza la técnica enlínea. Una vez que hayas llamado al método activate() con un scroll enlínea, todo deberá de trabajar inmediatamente. Pero si deseas cargar un fichero externo adentro del scroll, debes en lugar llamar al método load() y pasar el url a la página:
function init() {
myscroll.load('file.html')
}
Uno de los métodos ya sea él activate() o load() puede ser llamado después que todas las capas han sido escritas o en la función init(), como tu prefieras.
Fijando Ficheros Externos:
Cuando se utilizan ficheros externos, debes de insertar también una línea de JavaScript adentro de esos ficheros para llamar al método activate().
<BODY onLoad="if (parent.Scroll) parent.myscroll.activate()">
Recuerda que si nombras a tu objeto scroll algo diferente también deberás de cambiar a esa línea.
Demostraciones:
| Nombre del fichero | Fuente de Código | Descripción |
| demo-external.html | Código | contenido externo, posicionado absolutamente |
| demo-nested.html | Código | contenido externo, posicionado absolutamente, nested adentro de otra DIV |
| demo-relative.html | Código | contenido externo, posicionado absolutamente |
| demo-inline.html | Código | contenido enlinea, posicionado absolutamente |
También ver la fuente de text1.html (Los ficheros externos utilizados en esos ejemplos).
| Casa | Próxima Lección: Objeto Lista |