script.aculo.us es una biblioteca JavaScript construida sobre Prototype JavaScript Framework , que proporciona efectos visuales dinámicos y elementos de interfaz de usuario a través del Modelo de objetos de documento (DOM).
Desarrollador (es) | Thomas Fuchs |
---|---|
Lanzamiento final | 1.9.0 / 23 de diciembre de 2010 |
Repositorio | |
Escrito en | JavaScript |
Tipo | Biblioteca de JavaScript |
Licencia | Licencia MIT |
Sitio web | guión |
Se incluye principalmente con Ruby on Rails y Seaside , pero también se proporciona por separado para trabajar con otros marcos web y lenguajes de scripting.
script.aculo.us fue extraído por Thomas Fuchs de su trabajo en fluxiom, una herramienta de gestión de activos digitales basada en la web de la empresa de diseño wollzelle. [1] Fue lanzado al público por primera vez en junio de 2005.
Características
script.aculo.us amplía Prototype JavaScript Framework agregando efectos visuales, controles de interfaz de usuario y utilidades.
Efectos visuales
Hay cinco efectos principales que ofrece script.aculo.us: Opacidad, Escala, MoveBy, Resaltado y Paralelo. A través de estos efectos, hay más de 16 efectos adicionales que utilizan combinaciones de los efectos principales listos para usar. Los programadores también pueden ampliar los efectos existentes y crear nuevos.
Habilitar un efecto es una cuestión de asignar un elemento con un nombre de identificación y una línea de código para el efecto. A continuación se muestra un ejemplo del efecto Effect.Fade aplicado a un elemento DOM con un ID de 'message-box':
nuevo efecto . Fade ( 'cuadro de mensaje' );
Esto hará que el ID de destino pierda opacidad y termine estableciendo la propiedad "display" de CSS en "none".
Se pueden modificar varios otros ajustes dentro del efecto, como la duración del efecto y el rango del efecto:
nuevo efecto . Fundido ( 'cuadro de mensaje' , { duración : 2.0 , de : 0.0 , a : 0.8 });
Esto desvanecería el elemento, pero se detendría cuando el efecto esté completo en un 80% (con una opacidad del 20%).
Control S
Controls ofrece elementos de interfaz de usuario que incluyen:
- Arrastrar y soltar
- Draggables
- Droppables
- Clasificables
- Deslizador
- Autocompletar
- Edición in situ
Constructor
Builder permite crear elementos DOM de forma dinámica. Usando el código de muestra a continuación:
element = Builder . node ( 'div' , { id : 'ghosttrain' }, [ Builder . node ( 'div' , { className : 'controls' , style : 'font-size: 11px' }, [ Builder . node ( 'h1' , 'Tren fantasma' ), "texto de prueba" , 2 , 3 , 4 , Builder . Node ( 'ul' , [ Builder . Node ( 'li' , { className : 'active' , onclick : 'test ()' }, ' Registro ' ) ]) ]) ]);
... crea lo siguiente (sin espacios en blanco ):
< div id = "ghosttrain" > < div class = "controls" style = "font-size: 11px" > < h1 > Tren fantasma h1 > testtext234 < ul > < li class = "active" onclick = "test ()" > Grabar li > ul > div > div >
Referencias
enlaces externos
- Página web oficial
- scriptaculous en GitHub
- wiki de documentación de script.aculo.us
- Wiki no oficial de Prototype & Script.aculo.us y preguntas frecuentes creadas por miembros de la comunidad