Fade IN/OUT com Scriptaculous

01 Outubro 2008 Escrito por Gonçalo Martins

Recentemente ando interessado pela Framework Prototype. No entanto o Prototype só por si torna "complicado" de se programar algo um pouco mais elaborado.

É para contornar esta lacuna do prototype que apareceu o Scriptaculous, uma espécie de "add-on" ao Prototype.

Utilizando dois ficheiros de javascript prentendo realizar uma caixa de login do género do DailyMotion, ou Digg. Utilizando para tal o efeito toogle da framework, que irá realizar um fade in ou fade out à caixa de login.

Ponto 1: Load Scripts

Adicionar os ficheiros .js antes de </head> no HTML do seu website.

Ponto 2: Código HTML

<div class="texto"><a href="#" onclick="Effect.toggle('login','appear'); return false;">Login</a></div>

<div id="login" style="display:none;">Nick <input name="" type="text" /> Password <input name="" type="text" /></div>

O segredo do funcionamento do efeito reside em:

Effect.toogle() que recebe dois parâmetros. O ID da div sobre a qual pretende efectuar o fade, e o efeito, neste caso 'appear'.

E se o utilizador não possuir o javascript activado?

Muitos internautas, por qualquer motivo, não possuem o suporte para javascript activo. Quando isto acontece o utilizador não irá conseguir realizar login. Uma solução passa por criar um ficheiro distinto .html ou .php para que o internauta realize login.

Para tal altere a primeira linha de código HTML para:

<div class="texto"><a href="/login.php" onclick="Effect.toggle('login','appear'); return false;">Login</a></div>

Artigos Relacionados

Trackback(0)

TrackBack URI for this entry



Ricardo Outubro 02, 2008	Infelismente o prototype é incompativel com mootools... e mesmo que não fosse é uma framework muito pesada!!!! Isto não dá para fazer com mootools? até gostava de ter um login deste genero no meu site... e como ja utilizo a mootools com alguns exemplos aqui do site!


Festinho Outubro 02, 2008	Cara... bom efeito... pena é não funcionar com javascript desabilitado... n existe maneira utilizando css não? ou detectar se têm ou nao o javascript activado?


Raquel Outubro 02, 2008	Muito bom esse efeito

Escreva o seu Comentario

Fade IN/OUT com Scriptaculous

Ponto 1: Load Scripts

Ponto 2: Código HTML

E se o utilizador não possuir o javascript activado?

Artigos Relacionados

Nuvem de Tags