O documento descreve o que é o Scriptaculous, uma biblioteca JavaScript que fornece efeitos visuais e elementos de interface dinâmicos. Ele foi desenvolvido por Thomas Fuchs e é baseado no framework Prototype JavaScript. O documento explica como baixar e instalar o Scriptaculous, seus principais efeitos e funcionalidades, como arrastar e soltar, controles e deslizantes, além de vantagens e desvantagens do uso da biblioteca.

1. Rafael Leonardo Vivian
Joaquim Ribeiro Neto
Universidade Estadual de Maringá – UEM
Especialização Desenvolvimento de Sistemas para Web
Dezembro 2008

2. O que é?
• Biblioteca JavaScript
• Embutida sobre o Prototype JavaScript
Framework
• Efeitos visuais dinâmicos
• Elementos de interface com usuário

3. O que é?
• Desenvolvido por: Thomas Fuchs
• Última versão: 1.8.2 / 18 novembro 08
• Tamanho: ~247 KB
• Licença: MIT License
• Website: http://script.aculo.us

4. Quem usa?

5. Download & install
• http://script.aculo.us/downloads
• Descompactar prototype.js,
scriptaculous.js, builder.js, effects. js,
dragdrop.js, slider.js, controls.js e
sound.js em um diretório, por
exemplo /javascripts

6. Download & install
• “Linkar” os scripts no head do seu html
• Por padrão, scriptaculous.js carrega
todos os outros arquivos javascripts
necessários para efeitos, arrastar-e-
soltar, slides e outras funcionalidades...

7. Download & install
• Se não for necessário todas as
funcionalidades, pode-se limitar os
scripts adicionais que serão carregados
• builder, effects, dragdrop, controls,
slider e sound

8. Efeitos Visuais e Interface de
Comportamento
• Core Effects
• Combination Effects
• Effect helpers
• Behaviours
• Controls
• Miscellaneous

9. Core effects
• Effect.Morph: muda as propriedades
CSS de um elemento
• Sintaxe:

10. Core effects
• Effect.Move: modifica os atributos da
posição, em pixels, de um elemento
• Sintaxe:

11. Core effects
• Effect.Scale: modifica as dimensões
width e height de um elemento
(opcional do conteúdo), em
porcentagem
• Sintaxe:

12. Core effects
• Effect.Highlight: flashes color no
background de um elemento
• Sintaxe:

13. Core effects
• Effect.Opacity: modifica a
transparência de um elemento
• Sintaxe:

14. Combination Effects
• Effect.Fade: faz um elemento sumir
gradualmente
• Sintaxe:

15. Combination Effects
• Effect.Appear: faz um elemento
aparecer gradualmente
• Sintaxe:

16. Combination Effects
• Effect.BlindUp: simula uma janela
fechando
• Sintaxe:

17. Combination Effects
• Effect.BlindDown: simula uma janela
abrindo
• Sintaxe:

18. Combination Effects
• Effect. SlideUp: oculta o elemento
verticalmente, linha-a-linha, iniciando
do top do elemento
• Sintaxe:

19. Combination Effects
• Effect. SlideDown: exibe o elemento
verticalmente, linha-a-linha, iniciando
do bottom do elemento
• Sintaxe:

20. Behaviours
• Draggable: áreas que podem ser
arrastadas
• Sintaxe:

21. Behaviours
• Droppables: faz um elemento reagir
quando um Draggable é solto dentro
dele
• Sintaxe:

22. Controls
• Autocompleter.Local: um array local
com opções para auto completar na
página
• Sintaxe:

23. Controls
• Ajax.InPlaceEditor: um elemento de
texto que pode ser editado
• Sintaxe:

24. Controls
• Slider: usado para selecionar um valor
para determinado elemento
• Sintaxe:

25. Vantagens
• Interfaces mais interativas e dinâmicas
com o usuário
• Arquivos javascripts separados para
cada tipo de funcionalidade

26. Desvantagens
• “Não vive sem” o Prototype Framework (?)
• Funcionalidades com problemas de
compatibilidade com alguns navegadores
• Javascript pode ser desabilitado pelo
usuário

27. Mais informações...
• Website: http://script.aculo.us
• Documentação: http://github.com/madrobby/
scriptaculous/wikis
• Demos:
http://github.com/madrobby/scriptaculous/w
ikis/demos
• Grupo:
http://groups.google.com/group/prototype-
scriptaculous