05

Jul

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>
<!-- O seu conteúdo aqui -->
</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
  1. <script type="text/javascript" src="mootools.svn.js"></script>

 

e abaixo da linha anterior adicione o seguinte código:
javascript
  1. <script type="text/javascript">
  2. window.addEvent('domready', function(){
  3. var mySlide = new Fx.Slide('section');
  4.  
  5. $('toggle').addEvent('click', function(e){
  6. e = new Event(e);
  7.  
  8. mySlide.toggle();
  9.  
  10. e.stop();
  11.  
  12. });
  13.  
  14. });
  15.  
  16. </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


cometarios
Trackback(0)
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();"


Escreva o seu Comentario
 
  pequeno | maior
 

busy
 

Patrocinadores do Site

Subscrever Feed



Artigos

Ultimos artigos
jsimageNeste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
phpthumbAtualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
benchmarksA pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
phpimageredRedimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
linksafiliadosNo inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...