Criar uma Caixa Expansível - Mootools

Escrito por Gonçalo Martins

Caixa Expansível

Como criar aquelas "caixas" presentes em alguns websites que quando clicamos no topo delas, se retraem ou expandem, e todo o conteúdo abaixo destas se adapta às novas dimensões do site?

Isto pode ser feito de algumas maneiras diferentes (que irei abordar de futuro), no entanto no exemplo dado abaixo vou utilizar Mootools, para criar este efeito.

Passo 1: HTML

<h2><span>
<a href="#" id="toggle">Secção</a>
</span></h2>
<div id="section">
<div>

</div>
</div>

id="toggle" e id="section" serão os "identificadores" para o Mootools.

Passo 2: Adicionar o efeito Toogle do Mootools

Adicione um link para a Mootools framework antes de </head> no seu site.

javascript
<script type="text/javascript" src="mootools.svn.js"></script>

e abaixo da linha anterior adicione o seguinte código:

javascript
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('section');
 
$('toggle').addEvent('click', function(e){
e = new Event(e);
 
mySlide.toggle();
 
e.stop();
 
 });
 
});
 
</script>

E é tudo...

^{Update: Nova versão da caixa expansivel com indicador de estado!!}

Download dos ficheiros referidos no artigo:
caixaexp.rar	[Um exemplo do artigo acima [css, html, mootools, script]]	39 Kb

Gostou deste Artigo?

Subscreva o feed RSS ou reguiste-se na Newsletter do WebLouca, agora!

Tags:

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



Higor Morais Dezembro 29, 2008	Como eu faço para adicionar essa mesma função em mais de um elemento?Por pelo que vi pode-se aplicar em elementos de uma mesma classe, mas não com o mesmo ID, pois os ids têm que ser diferentes.


Andreza Janeiro 13, 2009	Gostaria de saber a resposta do Higor e também como faço para que os outros elementos não apareçam expandidos. Obrigada!


GoncaloM Janeiro 13, 2009 http://weblouca.com	@ Higor Morais, Andreza Infelizmente o script acima só funciona para uma determinada 'div'. Se quiser aplicar em mais que um local, terá que duplicar o script e modificar as seguintes variáveis "mySlide" e os id's "toogle" e "section" estes ultimos tanto no Javascript como no html. Esta é a forma mais simples de o fazer, utilizando o código acima.


Sam Novembro 26, 2009	Boas. Primeiro quero felicitar pela apresentação. Está com muito bom estilo. Como sou um pouco leigo em javascript Queria apenas saber como posso fazer para que a caixa comece já fechada?? Obrigado. email - Este endereço de e-mail está protegido de spam bots, pelo que necessita do Javascript activado para o visualizar


GoncaloM Novembro 26, 2009	@Sam A seguir à linha: "var mySlide = new Fx.Slide('section');" Adicione: "mySlide.hide();"