script.aculo.us
Upcoming SlideShare
Loading in...5
×
 

script.aculo.us

on

  • 1,977 views

 

Statistics

Views

Total Views
1,977
Views on SlideShare
1,975
Embed Views
2

Actions

Likes
0
Downloads
20
Comments
0

1 Embed 2

http://www.slideshare.net 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

script.aculo.us script.aculo.us Presentation Transcript

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