- Artigos
- Javascript
- Dinheiro
- Joomla
- Design
- Wordpress
Criar uma Caixa Expansível - Mootools
05 Julho 2008
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>
<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.
<script type="text/javascript" src="mootools.svn.js"></script>
e abaixo da linha anterior adicione o seguinte código:
<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>
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!!
 caixaexp.rar | [Um exemplo do artigo acima [css, html, mootools, script]] | 39 Kb |
Trackback(0)
TrackBack URI for this entry
Escreva o seu Comentario
Continuando na mesma "onda" do ultimo artigo sobre design publicado no WebLouca, Como criar madeixas...
Para quem não sabe o JW Player (http://www.longtailvideo.com/players/jw-flv-player/) é um player f...
Deseja criar um header mais atractivo para o seu website? Deseja criar um Logótipo, diferente do n...
A par do Wordpress (/wordpress) o Joomla é um dos mais utilizados gestores de conteúdos da actuali...
Anda à procura de uma solução simples e gratuita para colocar vídeos flash no seu website? Talve...
Neste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span co...
Atualmente praticamente todos os websites possuem a necessidade de listar os seus artigos...
A pouco mais de um ano falei sobre uma ferramenta para otimizar imagens (Artigos/optimize...
Redimensionar uma imagem com php pode ser um processo complicado. Quando por exemplo um wo...
No inicio do ano escrevi um artigo onde dáva a conhecer uma forma de criar links de afili...
Dezembro 29, 2008