Caixa Expansivel - Update

Escrito por Gonçalo Martins

À algum tempo atrás forneci um exemplo de uma caixa expansível que poderia criar em Mootools. O exemplo dessa mesma caixa pode ser visto aqui. Ao longo dos últimos tempos tenho recebido alguns e-mails a perguntar como implementar um indicador de que a caixa está aberta ou fechada.

Em relação à caixa expansível que criei anteriormente a única coisa que mudará é o javascript, e a adição de uma nova classe ao HTML e um pouco de CSS.

O novo Javascript ficará algo do género:

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();
                
        if($('toggle').hasClass('icon')){
            $('toggle').removeClass('icon');
 
            $('toggle').addClass('icon2');
 
        } else {
            $('toggle').removeClass('icon2');
 
            $('toggle').addClass('icon');
                
        }
        
        e.stop();
 
    });
 
});
 
</script>

A unica coisa que muda no código em relação ao anterior é a adição das seguintes linhas:

php
 if($('toggle').hasClass('icon')){ //detecta se possui a class 'icon' junto a id="toggle" no HTML    
    $('toggle').removeClass('icon');
 //Se a class for 'icon', remove a class
    $('toggle').addClass('icon2');
 //Depois de remover a class icon adiciona a classe 'icon2', que irá mudar a imagem
} else { //para abrir
    $('toggle').removeClass('icon2');
//detecta a class 'icon2' adicionada quando se fechou, e remove-a
     $('toggle').addClass('icon');
 //adiciona de novo a class 'icon'               
}

O HTML:

html
<h2><span>
<a href="#" id="toggle" class="icon">Secção</a>
</span></h2>
<div id="section">
<div>
<!-- O seu conteúdo aqui -->
</div>
</div>

O CSS:

css
.icon {background:url(img/close.png)bottom left no-repeat;
 
    font-size: 16px;
 
    padding-left: 17px;
 
    margin-left: 2px;
 
    margin-bottom: 5px;
 
    List-style:none;
}
    
.icon2 {background:url(img/open.png)bottom left no-repeat;
 
    font-size: 16px;
 
    padding-left: 17px;
 
    margin-left: 2px;
 
    margin-bottom: 5px;
 
    List-style:none;
}

^{Como melhorar:
O meu conselho é utilizar uma CSS Sprite para realizar o load das imagens open e close! Desta forma não se notará um pequeno desfasamento da primeira vez que o utilizador carregar na caixa para a fechar!}

Exemplo

Download

Gostou deste Artigo?

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

Tags:

mootools, caixa expansivel, javascript, html, css

Categoria:

Se preferir, pode ainda deixar um comentário

PATROCINADORES

ARTIGOS RELACIONADOS

Trackback(0)

TrackBack URI for this entry



joabel Novembro 30, 2008	Muito bom o artigo, porém gostaria de na mesma página colocar várias dessas caixas. Tentei isso, porém somente a primeira desliza, as outras nao...como faço isto?abraço e parabens


GoncaloM Novembro 30, 2008 http://weblouca.com	@joabel A forma mais simples de o fazer passa por recopiar o código acima e alterar as seguintes linhas: no JS: var mySlide1 = new Fx.Slide('section1'); $('toggle1').addEvent('click', function(e){ if($('toggle1').hasClass('icon')){ $('toggle1').removeClass('icon'); $('toggle1').addClass('icon2'); } else { $('toggle1').removeClass('icon2'); $('toggle1').addClass('icon'); } NO HTML: id="toggle1" id="section1" Creio que dá para entender as variáveis que necessitam de ser diferentes ;)


Paulo Julho 22, 2009	Olá. Fiz, e ficou show de bola.. porém, gostaria de saber, se quando eu carregar a pagina, as caixas ja aparecem fechadas.. pois deste modo, quando carrego, as caixas ja aparecem abertas, entende? O que posso fazer? Obrigado.


GonçaloM Julho 28, 2009 http://weblouca.com	@Paulo Para as caixas aparecerm fechadas a forma mais facil e directa é adicionar a linha: mySlide.hide(); após: var mySlide = new Fx.Slide('section'); ficando: var mySlide = new Fx.Slide('section'); mySlide.hide();


Elias Luiz Janeiro 05, 2010 http://www.extremos.com.br	É possivel fazer com que após um determinável tempo (programável) a caixa feche automaticamente?


Victor Janeiro 15, 2010 http://www.terciovictor.com.br	Olá Gonçalo, estou tendo problemas. Quando adiciono a linha: "mySlide.hide();" tenho problemas com o icone, pois ao invés de aparecer o + continua aparecendo o -, como se fosse para minimiza-la. Quando não se tem esta linha funciona ok. Será que estou fazendo algo errado? ou devo alterar algo no script para que o icone mude quando adiciono esta linda? Muito obrigado.


Victor Janeiro 15, 2010 http://www.terciovictor.com.br	Opa, informo que já consegui! Obrigado.


Robson Fevereiro 24, 2010	Olá cara eu naum to consequindo implementar no site! eu coloco o código na pagina em PHP e não expandi e nem fica pequena! e depois tento dar um include e fica na mesma, gostaria de saber se naum é copmpativel com php ou algo do tipo!


Felipe Maio 07, 2010 http://lipedesign.net	da hora parabens


buy essay Julho 07, 2010 http://www.gogetessays.com	It’s not hard to get information or buy an essay at the essays writers just about this topic.