Collapsible em Jquery

Postado por Daniel Lopes em 29/11/2008 JavaScript

English Version (Google Translate)

Adoro Flex, adoro Flash…. mas ajax também tem seu lugar, principalmente se você quer pensar em páginas, urls ou não vai ter um aplicativo totalmente integrado e assíncrono.

Finalmente resolvi migrar de Rails/Prototype para Rails/Jquery com o plugin JRails. E migrando uma aplicação que estou trabalhando acabei decidindo em parar de usar o Spry também e usar tudo em JQuery… eu sempre usei alguns widgets do Spry como Collapsible Panel, Validações e etc … mas resolvi usar só JQuery agora, em virtude de seus milhões de plugins e de ser leve.

Neste processo de migração esbarrei na necessidade de criar um collapsible panel em JQuery e não achei nenhum plugin… então resolvi o problema com as linha abaixo:

Marcação em html necessária para nossos collapsibles: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15


<div id="calculations_panel" class="collapsible">
  <div class="collapsible_tab">Titulo 1</div>
  <div class="collapsible_content">
    <p> Olá pessoal, eu sou um collapsible panel !!!</p>
    <p> Olá pessoal, eu sou um collapsible panel !!!</p>
    <p> Olá pessoal, eu sou um collapsible panel !!!</p>        
  </div>
  <div class="collapsible_tab">Titulo 2</div>
  <div class="collapsible_content">
    <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>
    <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>
    <p> Olá pessoal, eu sou um collapsible panel 2 !!!</p>        
  </div>
</div>
E agora nosso Javascript… importe o jquery em seu head: 
<script src="/javascripts/jquery.js" type="text/javascript"></script>

E coloque o código abaixo em um em um arquivo separado e importe-o ou coloco no final de seu html ( pode colocar no topo também, mas javascript, sempre que possível deve estar no final de seu HTML ).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22


function collapsible(){
  $(".collapsible_tab").map(function(){
    if (!$(this).hasClass("open"))
      $(this).next(".collapsible_content").hide();
  });
  
  $(".collapsible_tab").click(
    function(e){
      var content = $(this).next(".collapsible_content");
      
      if (content.is(':visible')){
        content.slideUp();
        $(e.target).removeClass('open');
      } else {
        content.slideDown();
        $(e.target).addClass('open');
      }
    }
  );
  
}
Feito isso você vai precisar chamar a função collapsible() para inicializar todos os seus collapsibles da tela… basta adicionar isso no evento ready. 
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () { collapsible(); });
    </script>

Agora vou poder reutilizar esse collapsible na por toda minha app.

Se alguem tiver sugestões sobre alterações no código do collapsible posta aí no comentários porque não sou nenhum expert em JQuery ainda, e deve ter passado algo que pode ser otimizado.

Veja o exemplo rodando abaixo:

1 Comentário to “Collapsible em Jquery”

tiffany jewellery diz:
23/07/2010 em 02:30 AM

I really like your essay. Thanks for your sharing.moncler buy tiffany jewellery authentic pandora beads

Comentário

CATEGORIAS

Home
Design
SEO
Empreendimento
Cifras
Ruby e Rails
Flex
Photoshop
Flash
XHTML/CSS
JavaScript
Variados
Database
Firefox
Projetos
3D
Projetos
TextMate
Smalltalk
Mac
Livros

ARQUIVO

07/2010 (2)
06/2010 (4)
05/2010 (4)
04/2010 (4)
03/2010 (5)
02/2010 (7)
01/2009 (4)
12/2009 (7)
11/2009 (4)
10/2009 (10)
09/2009 (7)
08/2009 (6)
07/2009 (12)
06/2009 (5)
05/2009 (6)
04/2009 (9)
03/2009 (14)
02/2009 (18)
01/2009 (14)
12/2008 (20)
11/2008 (18)
10/2008 (9)
09/2008 (12)
08/2008 (6)
07/2008 (12)
06/2008 (10)
05/2008 (15)
04/2008 (19)

ÚLTIMOS COMENTÁRIOS

PomoDo e Pomodoro Technique
comentado por Luis

Flash SlideShow
comentado por Gilmar

50% do software é design
comentado por Daniel Lopes

Vetores Grátis - VectorLab Pack
comentado por louis vuitton

Texturas legais
comentado por thomas sabo kommt