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:

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

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:

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

</div>
</div>

O 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

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 ;)

Escreva o seu Comentario

Gonçalo Martins

Freelancer, Fan de Desing, Praticante KickBoxing e Blogger nos tempos livres.

Ferramentas WebLouca: JSPacker | CSSPacker

Têm conhecimentos? Escreva um guest post! +info

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteúdo apresentado.
Não existe recompensa monetária, mas escrever um artigo de qualidade no WebLouca é uma excelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Sinta-se livre para me contactar e expor as suas ideias.

Patrocinadores do Site

Subscrever Feed

Tens Talento?

^{- fechar caixa contacto -}

Considera escrever um guest post no weblouca!

Procuro pessoas que possam escrever artigos exclusivos, de forma a variar o estilo do conteudo apresentado.
Não existe recompensa monetaria, mas escrever um artigo de qualidade no WebLouca é uma exelente forma de:

- Se promover na Comunidade;
- Promover o seu blog, website ou negocio;
- Ajudar outros programadores e Designers;

Contacte-me e exponha-me as suas ideias.

^{- caixa contacto -}