script.aculo.us - script.aculo.us


script.aculo.us
Scriptaculous logo.png
Desenvolvedor (s) Thomas Fuchs
Último lançamento
1.9.0 / 23 de dezembro de 2010 ( 23-12-2010 )
Repositório Edite isso no Wikidata
Escrito em JavaScript
Modelo Biblioteca JavaScript
Licença Licença MIT
Local na rede Internet script .aculo .us Edite isso no Wikidata

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