Web Louca

Home scripts Caixa Expansivel - Update

Caixa Expansivel - Update

18 Novembro 2008 Escrito por Gonçalo Martins

 

caixa espansivelÀ 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:

<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:

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>
<!-- O seu conteúdo aqui -->
</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!

 

 

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

@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

@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

É possivel fazer com que após um determinável tempo (programável) a caixa feche automaticamente?
Victor
Janeiro 15, 2010

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

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

da hora parabens
buy essay
Julho 07, 2010

It’s not hard to get information or buy an essay at the essays writers just about this topic.

Aparecido
Agosto 26, 2010

Olá, baixei o codigo instalei eficou show. Mas eu pretendo colocar no conteudo o api do google maps, e gostaria de recolher 50% apenas, mostrando metade do mapa e depois ao clicar redimensionar 100%.
Onde altero para essa opção?
leumas
Novembro 23, 2010

amigos, como ponho o (+) e (-) a funcionar no explorer?


Escreva o seu Comentario
 
  pequeno | maior
 

busy
Subscreve a newsletter gratuita e começa hoje mesmo a criar websites e a ganhar dinheiro na internet!


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

Nuvem de Tags

script browser mootools exemplo