Scriptaculous – Efeitos Aparecer e Desaparecer
Dec 14, 2008 Tutoriais
Durante esta semana o PT Ajax vai apresentar uma serie de artigos sobre os efeitos que podem ser criados usando duas frameworks bastante conhecidas prototype e o script.aculo.us.
Para começar, hoje apresentamos o efeito de aparecer e desaparecer. Basicamente este efeito consiste em fazer um elemento html aparecer ou desaparecer da nossa pagina.
Antes de mais para esta serie de artigos vamos precisar de duas frameworks em que já falamos várias vezes aqui no PT Ajax o prototype e o scriptaculous.
Depois de terem feito o download de ambas as frameworks gravem os ficheiros numa nova directoria onde se encontra o vosso projecto por exemplo “javascript” ou “js” mas podem usar qualquer nome.
Inicio
Vamos começar, criem um novo ficheiro HTML e logo no inicio vamos começar por incluir ambas as frameworks:
<html> <head> <title>Scriptaculous Efeito Aparecer e Desaparecer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> </head> </html>
Agora vamos a parte de criar o efeito, primeiro temos que criar o elemento que queremos fazer aparecer e desaparecer, para este exemplo criamos uma simples caixa usando um div e css.
O estilo para o elemento.
<style type="text/css">
#caixa {width:200px; height:200px; background-color:green;}
</style>
O elemento div.
<div id="caixa" style="display:none;"> Mensagem! </div>
Ok esta tudo preparado, agora criamos dois links em que usamos a tag onClick para gerar o evento no qual chamamos a nossa função em javascript que vai lidar com o evento.
<a href="#" onClick="aparecer()">Aparece</a> <a href="#" onClick="desaparecer()">Desaparece</a>
O primeiro link Aparece usa a função aparecer() para criar o efeito aparecer, o segundo link Desaparece usa a função desaparecer() para criar o efeito desaparecer.
Por fim criamos o javascript necessário para lidar com os eventos.
<script type="text/javascript">
function aparecer(){
$('caixa').appear()
}
function desaparecer(){
$('caixa').fade()
}
</script>
Vamos ao detalhe, primeiro declaramos uma função para isso usamos:
function NomeQueQuisermosDar(){
}
No nosso caso foi aparecer e desaparecer. De seguida vamos usar prototype para dizermos que elemento queremos modificar:
$('OIdDoElementoQueQueremosModificar')
Para quem esta habituado a usar javascript, prototype permite usarmos $() em vez do típico document.GetElementById, tornando-se mais simples, e melhor ainda resolve os problemas de usar javascript em browsers diferentes.
Por fim usamos script.aculo.us para os efeitos:
.appear() .fade()
Estes efeitos já estão criados pela a framework e se tiveres curiosidade em saber mais abre o ficheiro effects.js.
Com opção do tempo
Scrip.aculo.us permite também modificarmos o tempo do efeito, para tal só precissamos de fazer uma pequena modificação.
Começamos por criar mais dois links em que vamos usar outras duas funções em javascript.
<a href="#" onClick="aparecertempo()">Aparece</a> <a href="#" onClick="desaparecertempo()">Desaparece</a>
Como podemos ver pelo o evento onClick têmos que criar duas novas funções:
function aparecertempo(){
$('caixa').appear({ duration: 5.0 })
}
function desaparecertempo(){
$('caixa').fade({ duration: 5.0 })
}
Basicamente estas novas funções são exactamente iguais as anteriores mas passamos o argumento duration no qual especificamos em segundos o tempo que queremos que o efeito dure. Sendo assim podemos controlar ainda mais o efeito.
Mais avançado
Até agora temos explicado como usar o efeito de uma maneira simples, mas e se quisermos complicar um pouco mais? Como por exemplo usar só uma função e só um link para controlarmos o efeito.
Primeiro um novo link:
<a href="#" onClick="controlarcaixa('caixa', 2.0)">Caixa</a>
Neste exemplo usamos controlarcaixa em que passamos dois argumentos. O primeiro argumento (caixa) é o ID do elemento que queremos modificar e o segundo argumento (2.0) é o tempo do efeito.
function controlarcaixa(CaixaID, Tempo){
if ($(CaixaID).style.display == 'none') {
$(CaixaID).appear({duration: Tempo})
} else {
$(CaixaID).fade({duration: Tempo})
}
}
Esta nova função controla tanto o aparecer e desaparecer do nosso elemento. Primeiro analisamos se o nosso elemento esta visível, senão estiver aplicamos o efeito de aparecer. Se estiver visível então aplicamos o efeito de desaparecer.
Conclusão
Como podemos ver com a ajuda do scrip.aculo.us e o prototype em poucas linhas de código podemos criar o efeito de aparecer e desaparecer.
Espero que este tutorial tenha dado uma ajuda para a vossa descoberta de ambas as frameworks. No proximo artigo continuamos a analisar os efeitos possiveis.
December 15th, 2008 as 4:34 pm
Nunca tinha visto como fazer isso em outro FramwWor. Só fiz mesmo com jQuery. Parece até que é mais simples ainda.
Abs
December 26th, 2008 as 2:15 am
Que legal que vocês retornaram!!!
Acho o site de vocês muito bem elaborado e com o assunto muito bem detalhado, inclusive referencio o site dos senhores em meu blog!
Bom, desejo sucesso aos senhores, um feliz natal e boas festas e que Deus nos ilumine com a sua imensa sabedoria!
Estamos juntos!
Fique com Deus
Thiago Cantero Mari Monteiro
March 28th, 2009 as 3:51 pm
[...] criem um novo ficheiro HTML e logo no inicio vamos começar por incluir ambas as frameworks: view plaincopy to [...]