script.aculo.us - Visão geral

O que é script.aculo.us?

script.aculo.us é uma biblioteca JavaScript construída sobre o Prototype JavaScript Framework, aprimorando a GUI e fornecendo experiência Web 2.0 aos usuários da web.

script.aculo.us foi desenvolvido por Thomas Fuchs e foi lançado ao público pela primeira vez em junho de 2005.

script.aculo.us fornece efeitos visuais dinâmicos e elementos de interface do usuário por meio do Document Object Model (DOM).

O Prototype JavaScript Framework é um framework JavaScript criado por Sam Stephenson que fornece um framework Ajax e outros utilitários.

Como instalar o script.aculo.us?

É muito simples instalar a biblioteca script.aculo.us. Ele pode ser configurado em três etapas simples -

Vá para a página de download para baixar a versão mais recente em um pacote conveniente.
Descompacte o pacote baixado e você encontrará as seguintes pastas -
- lib - contém o arquivo prototype.js.
- src - contém os seguintes 8 arquivos -
  - builder.js
  - controls.js
  - dragdrop.js
  - effects.js
  - scriptaculous.js
  - slider.js
  - sound.js
  - unittest.js
- test - contém arquivos para fins de teste.
- CHANGELOG - Arquivo que contém o histórico de todas as alterações.
- MIT-LICENSE - Arquivo que descreve os termos de licenciamento.
- README - Arquivo que descreve o pacote de instalação, incluindo as instruções de instalação.
Agora coloque os seguintes arquivos em um diretório do seu site, por exemplo, / javascript.
- builder.js
- controls.js
- dragdrop.js
- effects.js
- scriptaculous.js
- slider.js
- prototype.js

NOTE - Os arquivos sound.js e unittest.js são opcionais

Como usar a biblioteca script.aculo.us?

Agora você pode incluir o script script.aculo.us da seguinte maneira -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js"></script >
   </head>
	
   <body>
      ........
   </body>
</html>

Por padrão, scriptaculous.js carrega todos os outros arquivos JavaScript necessários para efeitos, arrastar e soltar, controles deslizantes e todos os outros recursos de script.aculo.us.

Se você não precisa de todos os recursos, pode limitar os scripts adicionais que são carregados especificando-os em uma lista separada por vírgulas, por exemplo -

<html>
   <head>
      <title>script.aculo.us examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      ........
   </body>
</html>

Os scripts que podem ser especificados são -

effects
dragdrop
builder
controls
slider

NOTE - Alguns dos scripts requerem que outros sejam carregados para funcionar corretamente.

Como chamar uma função de biblioteca script.aculo.us?

Para chamar uma função de biblioteca script.aculo.us, use tags de script HTML como mostrado abaixo -

<html>
   <head>
      <title>script.aculo.us examples</title>
		
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript"  src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>

      <script type = "text/javascript" language = "javascript">
         // <![CDATA[
         function action(element){
            new Effect.Highlight(element, 
               { startcolor: "#ff0000", endcolor: "#0000ff", restorecolor: "#00ff00",  duration: 8 });
         }
         // ]]>
      </script>
   </head>
	
   <body>
      <div id = "id" onclick = "action(this);">
         Click on this and see how it change its color.
      </div>
   </body>
</html>

Aqui, estamos usando o módulo Effect e aplicando o efeito Highlight em um elemento.

Isso produzirá o seguinte resultado -

Outra maneira fácil de chamar a função de qualquer módulo é dentro dos manipuladores de eventos da seguinte maneira -

<html>
   <head>
      <title>script.aculo.us examples</title>

      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      <script type = "text/javascript" src = "/javascript/scriptaculous.js?load = effects,dragdrop"></script>
   </head>
	
   <body>
      <div onclick = "new Effect.BlindUp(this, {duration: 5})">
         Click here if you want this to go slooooow.
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -