Es exactamente lo que piensas y más. Es un widget que parece y funciona como un Scrollbar - pero realmente todo esta en una capa acomodada adentro de otra capa, la cual pueda ser arrastrada a donde sea. He hecho esto también como un scrollbar dimensional, si fijas las dimensiones de conforme que arrastras una capa acomodada (la cual me refiero con Caja "box" ) alrededor, dentro de los límites. Este widget es utilizado por el mismo como un genérico deslizador o tal vez como un widget zoom (te mostrare que es lo que tengo en la cabeza). El objeto Scroll2 utiliza dos formas del ScrollBar, una para la barra vertical, otra para la barra horizontal y los sincroniza con él ScrollWindow.
Constructor
ScrollBar(x,y,width,height,boxW,boxH)
El ancho y alto Refiere al ancho y el alto del widget entero (la capa de la parte de afuera), boxW y boxH son el ancho y la altura de la caja (la capa de adentro). Luego tienes que hacer la secuencia usual build-css-div-activate.
He también encontrado que este objeto funciona bien en Netscape si tienes el siguiente código de la función mouseMove() en particular:
if (is.ns && e.target!=document) routeEvent(e)
La función routeEvent() Pasará los eventos hacia abajo en la jerarquía que tiene Netscape. Por alguna razón el efecto que tiene esto es cuando comienzas a arrastrar la capa, este continuará a recibir coordinadores no importa que el ratón salga de los límites de la capa - el código mouseMove en el ScrollBar toma el control y no lo deja ir hasta que el ratón se ha dejado ir. Esta es una buena característica actualmente - hace que el scrollbar funcione de la forma que desearías. Recomiendo de poner el llamado al routeEvent() en cada una de las funciones del ratón :
function mouseDown(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseDown code
return true
}
function mouseMove(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseMove code
return true
}
function mouseUp(e) {
if (is.ns && e.target!=document) routeEvent(e)
// other mouseUp code
return true
}
Ejemplo: scrollbar-simple.html [fuente] - una ejemplo simple de ScrollBar.
Con fijar al ancho del ScrollBar a lo mismo que la caja tendrás el scrollbar vertical, y lo mismo con la altura.
Ejemplo: scrollbar-vh.html [fuente] - muestra scrollbars verticales y horizontal
El ScrollBar te permite definir tus propias imagenes que desees utilizar:
mybar.setImages(bg,box,shade,dir)
setImages() debe de ser llamado antes de build()
Ejemplo: scrollbar-images.html [fuente] - fijando imagenes
| Nombre de la Propiedad | Descripcion |
| name | guarda el nombre utilizado por todas la capas |
| w | el ancho del scrollbar |
| h | el alto del scrollbar |
| bgColor | el color del fondo de la barra, default es nulo (transparente) |
| boxColor | el color del fondo de la caja, default es nulo (transparente) |
| inc | el aumento en pixeles cuando haces click en alguna parte de la barra y la caja se desliza ligeramente a ese punto |
| speed | la ligereza (en ms) para el de arriba |
| boxvis | la visibilidad incial para la capa de la caja ('hidden','visible','inherit') |
| dragActive | devuelve a verdadero si la caja esta actualemente siendo arrastrada |
| 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 |
| 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. |
| Nombre del DynLayer | Descripción |
| lyr | la capa mas alta del ScrollWindow |
| boxlyr | la capa para la caja |
| lyrc | una capa que actualmente pasa por encima del entero scrollbar, una capa cubierta 'cover' layer como yo le llamo. Esta es una capa la cual recoge y controla todos los eventos del ratón, y te previene de hacer clic en las imágenes que componen en el scrollBar |
El Evento onScroll
El evento Scroll es llamado cada vez que la caja es arrastrada alrededor, o cuando haces clic en la barra y la caja se desliza ligeramente a ese punto. Puedes asignar el controlador al evento onScroll y utilizar este para hacer "cosas" cuando la caja se esta scrolling.
mybar.onScroll = MyBarHandler
function MyBarHandler() {
status = this.getXfactor()+' '+this.getYfactor()
}
Ejemplo: scrollbar-methods.html [fuente] - muestra de como utilizar los métodos
La demostración Zoom
Es una demostración bastante buena la cual imita el control común de aplicaciones gráficas donde se muestra una imagen pequeña como una uña Y te permite hacer scroll a una versión más grande de la imagen.
Ejemplo: scrollbar-zoom.html [fuente]
| Casa | Proxima Lección: Objeto Scroll2 |