Post on 24-May-2015
description
Aula 05
Wagner Silva
AgendaManipulando a exibição de objetos
Customizando animações com CSS
Enfileirando animações
Aplicação de Delay
Ajax
Revisão: PHP e XMLHttpRequest
Conexões Síncronas e Assíncronas
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.fadeIn(tempo,função)
$(“div”).fadeIn(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.show(tempo,função)
$(“div”).show(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.slideDown(tempo,função)
$(“div”).slideDown(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.fadeOut(tempo,função)
$(“div”).fadeOut(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.hide(tempo,função)
$(“div”).hide(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Manipulando a Exibição seleção.slideUp(tempo,função)
$(“div”).slideUp(2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS seleção.animate(propriedades,tempo,frequencia,função)
Somente propriedades numéricas são válidas
Frequência: swing ou linear
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS $(“div”).fadeOut(2000)
$(“div”).animate({
opacity : 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS $(“div”).hide(2000)
$(“div”).animate({
height : 0,
width : 0,
marginTop : 0,
marginLeft : 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS $(“div”).slideUp(2000)
$(“div”).animate({
height : 0,
marginTop: 0
},2000)
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS Propriedades podem possuir valores não numéricos:
propriedade : ‘show’
propriedade : ‘hide’
propriedade : ‘toogle’
Wagner Silva # Web 2.0 com Ajax Aula 05
Customizando com CSS Os valores das propriedades não necessitam ser exatos:
propriedade : ‘+= valor’
propriedade : ‘-= valor ’
Wagner Silva # Web 2.0 com Ajax Aula 05
Enfileiramento seleção.animação1.animação2. ... .animaçãon
Wagner Silva # Web 2.0 com Ajax Aula 05
Delay Atrasa a execução de animações enfileiradas
seleção.animação1.delay(tempo).animação2
Wagner Silva # Web 2.0 com Ajax Aula 05
Animação Exercício: Utilizar fadeIn e fadeOut para manipular a
exibição dos emails.
Ajax União de várias tecnologias
Interação dinâmica com usuário
Não há necessidade de recarregamento
Compartilhamento de recursos
Acessibilidade
Wagner Silva # Web 2.0 com Ajax Aula 05
Wagner Silva # Web 2.0 com Ajax Aula 05
Wagner Silva # Web 2.0 com Ajax Aula 05
PHP Linguagem de script server-side
Possui bibliotecas
Banco de dados
Imagens
Etc
Instalação, configuração e documentação: www.php.net
Wagner Silva # Web 2.0 com Ajax Aula 05
XmlHttpRequest Criado pela Microsoft
Acessar/recuperar dados do servidor (assíncrona)
Pode retornar:
XML
Json
Texto
Imagem
etc
Wagner Silva # Web 2.0 com Ajax Aula 05
Conexão com JQuery ajaxSetup() e ajax()
Principais propriedades:
async : booleano
data : mapeamento
statusCode : mapeamento
type : string (post/get)
success : função
url : string
Wagner Silva # Web 2.0 com Ajax Aula 05
Métodos$.get('ajax/teste.php',{},function(dados){
…
});
$.post('ajax/teste.php',{},function(dados){
...
});
Wagner Silva # Web 2.0 com Ajax Aula 05
Ajax Exercício: manipular pastas e busca via Ajax
Web 2.0 com Ajax # Aula 05 Próxima Aula:
Manipulando funções através do Ajax.
E-mail: web2softeam@gmail.com
Twitter: twitter.com/web2softeam