script.aculo.us

script.aculo.us
Dados básicos
desenvolvedor	Thomas Fuchs
Ano de publicação	Junho de 2005
Versão atual	1.9.0 ; (23 de dezembro de 2010)
sistema operacional	plataforma independente
linguagem de programação	JavaScript
Licença	Licença MIT
	script.aculo.us

script.aculo.us é um JavaScript - biblioteca com base no quadro JavaScript Prototype constrói. Ele oferece efeitos visuais dinâmicos e elementos GUI por meio do Document Object Model (DOM). Isso simplifica muito a criação de GUIs dinâmicas para sites.

É particularmente integrado em Ruby on Rails , mas também é oferecido separadamente para que funcione com outras estruturas de aplicativos da web e linguagens de script.

script.aculo.us foi retirado da ferramenta fluxiom de Thomas Fuchs , uma ferramenta de gerenciamento de ativos digitais baseada na web da empresa de design wollzelle . Foi apresentado pela primeira vez ao público em junho de 2005.

características

script.aculo.us estende o Prototype JavaScript Framework com efeitos visuais, elementos GUI e outras funções.

Efeitos visuais

Existem cinco efeitos principais que o script.aculo.us oferece: Opacity, Scale, MoveBy, Highlight e Parallel. Esses efeitos resultam em mais de 16 efeitos adicionais que usam combinações dos efeitos principais. Os programadores também podem expandir essa paleta de efeitos e adicionar novos efeitos.

Para ativar um efeito, você deve atribuir uma designação de ID ao respectivo elemento e adicionar uma linha de código para o efeito. A seguir está um exemplo do efeito Effect.Fade aplicado a um elemento DOM com o ID 'id_of_element':

new Effect.Fade('id_of_element');

Isso oculta o elemento com o ID de destino e, no final, define a propriedade de exibição da propriedade CSS como nenhum.

Algumas configurações, como B. a duração e o alcance do efeito podem ser definidos:

new Effect.Fade('id_of_element',
    { duration:2.0, from:0.0, to:0.8 });

Isso desvanece no elemento, mas o efeito pára quando estiver 80% completo (com uma opacidade de 20%).

Controles

Os controles fornecem elementos de GUI, incluindo:

Arrastar e soltar
- Draggables
- Droppables
- Classificáveis
- Slider
Preenchimento Automático
Edição no local

Construtor

Os elementos DOM podem ser gerados dinamicamente pelo construtor. Usando o código de exemplo 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')
    ])
  ])
]);

... o seguinte código HTML é gerado (sem novas linhas):

<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>

Veja também

jQuery

literatura

bibliotecas javascript . In: c't , 8/2010, p. 154

Links da web

Evidência individual

↑ Thomas Fuchs: Audible Ajax Episódio 12 Ajaxian

[interview-thomasf-1] Thomas Fuchs: Audible Ajax Episódio 12 Ajaxian

Languages