script.aculo.us - script.aculo.us
Desenvolvedor (s) | Thomas Fuchs |
---|---|
Último lançamento | 1.9.0 / 23 de dezembro de 2010
|
Repositório | |
Escrito em | JavaScript |
Modelo | Biblioteca JavaScript |
Licença | Licença MIT |
Local na rede Internet |
script |
script.aculo.us é uma biblioteca JavaScript construída no Prototype JavaScript Framework , fornecendo efeitos visuais dinâmicos e elementos de interface do usuário por meio do Document Object Model (DOM).
É mais notavelmente incluído com Ruby on Rails e Seaside , mas também fornecido separadamente para funcionar com outros frameworks web e linguagens de script.
script.aculo.us foi extraído por Thomas Fuchs de seu trabalho em fluxiom, uma ferramenta de gerenciamento de ativos digitais baseada na web pela empresa de design wollzelle. Foi lançado ao público pela primeira vez em junho de 2005.
Características
script.aculo.us estende o Prototype JavaScript Framework adicionando efeitos visuais, controles de interface do usuário e utilitários.
Efeitos visuais
Existem cinco efeitos principais que o script.aculo.us oferece: Opacity, Scale, MoveBy, Highlight e Parallel. Por meio desses efeitos, existem mais de 16 efeitos adicionais usando combinações dos efeitos principais prontos para uso. Os programadores também podem estender os existentes e criar novos efeitos.
Habilitar um efeito é uma questão de atribuir a um elemento um nome de ID e uma linha de código para o efeito. Abaixo está um exemplo para o efeito Effect.Fade aplicado a um elemento DOM com um ID de 'caixa de mensagem':
new Effect.Fade('message-box');
Isso fará com que a opacidade do ID de destino desapareça e termine definindo a propriedade CSS "display" como "none".
Várias outras configurações dentro do efeito podem ser modificadas, como a duração do efeito e o intervalo do efeito:
new Effect.Fade('message-box', {
duration: 2.0,
from: 0.0,
to: 0.8
});
Isso desvaneceria o elemento, mas pararia quando o efeito estiver 80% completo (com uma opacidade de 20%).
Controles
Controls oferece elementos de interface do usuário, incluindo:
- Arrastar e soltar
- Draggables
- Droppables
- Classificáveis
- Slider
- Preenchimento Automático
- Edição no local
Construtor
Builder permite criar elementos DOM dinamicamente. Usando o código de amostra abaixo:
element = Builder.node('div',{id:'ghosttrain'},[
Builder.node('div',{className:'controls',style:'font-size:11px'},[
Builder.node('h1','Ghost Train'),
"testtext", 2, 3, 4,
Builder.node('ul',[
Builder.node('li',{className:'active', onclick:'test()'},'Record')
])
])
]);
... cria o seguinte (sem espaço em branco ):
<div id="ghosttrain">
<div class="controls" style="font-size:11px">
<h1>Ghost Train</h1>
testtext234
<ul>
<li class="active" onclick="test()">Record</li>
</ul>
</div>
</div>
Referências
links externos
- Website oficial
- scriptaculous no GitHub
- wiki de documentação script.aculo.us
- Wiki e FAQ não oficial de Prototype & Script.aculo.us criado por membros da comunidade