script.aculo.us

1,178 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,178
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

script.aculo.us

  1. 1. Rafael Leonardo Vivian Joaquim Ribeiro Neto Universidade Estadual de Maringá – UEM Especialização Desenvolvimento de Sistemas para Web Dezembro 2008
  2. 2. O que é? • Biblioteca JavaScript • Embutida sobre o Prototype JavaScript Framework • Efeitos visuais dinâmicos • Elementos de interface com usuário
  3. 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. 4. Quem usa?
  5. 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. 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. 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. 8. Efeitos Visuais e Interface de Comportamento • Core Effects • Combination Effects • Effect helpers • Behaviours • Controls • Miscellaneous
  9. 9. Core effects • Effect.Morph: muda as propriedades CSS de um elemento • Sintaxe:
  10. 10. Core effects • Effect.Move: modifica os atributos da posição, em pixels, de um elemento • Sintaxe:
  11. 11. Core effects • Effect.Scale: modifica as dimensões width e height de um elemento (opcional do conteúdo), em porcentagem • Sintaxe:
  12. 12. Core effects • Effect.Highlight: flashes color no background de um elemento • Sintaxe:
  13. 13. Core effects • Effect.Opacity: modifica a transparência de um elemento • Sintaxe:
  14. 14. Combination Effects • Effect.Fade: faz um elemento sumir gradualmente • Sintaxe:
  15. 15. Combination Effects • Effect.Appear: faz um elemento aparecer gradualmente • Sintaxe:
  16. 16. Combination Effects • Effect.BlindUp: simula uma janela fechando • Sintaxe:
  17. 17. Combination Effects • Effect.BlindDown: simula uma janela abrindo • Sintaxe:
  18. 18. Combination Effects • Effect. SlideUp: oculta o elemento verticalmente, linha-a-linha, iniciando do top do elemento • Sintaxe:
  19. 19. Combination Effects • Effect. SlideDown: exibe o elemento verticalmente, linha-a-linha, iniciando do bottom do elemento • Sintaxe:
  20. 20. Behaviours • Draggable: áreas que podem ser arrastadas • Sintaxe:
  21. 21. Behaviours • Droppables: faz um elemento reagir quando um Draggable é solto dentro dele • Sintaxe:
  22. 22. Controls • Autocompleter.Local: um array local com opções para auto completar na página • Sintaxe:
  23. 23. Controls • Ajax.InPlaceEditor: um elemento de texto que pode ser editado • Sintaxe:
  24. 24. Controls • Slider: usado para selecionar um valor para determinado elemento • Sintaxe:
  25. 25. Vantagens • Interfaces mais interativas e dinâmicas com o usuário • Arquivos javascripts separados para cada tipo de funcionalidade
  26. 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. 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

×