Embed Size (px)
DESCRIPTION
Citation preview
Rafael Leonardo VivianJoaquim Ribeiro Neto
Universidade Estadual de Maringá – UEMEspecializaçã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
Quem usa?
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/wikis/demos
• Grupo: http://groups.google.com/group/prototype-scriptaculous
