jQuery tabs - abas simples e leve

Dezembro 1, 2007 at 15:14 · Categorias: JQuery, JavaScript

Olá pessoal,

nessa semana precisei fazer as famosas abas. Nada melhor que procurar um plugin pronto para jQuery. E não foi que eu encontrei. Mas só tem um problema: eu queria algo leve! A saída? Fazer a minha própria implementação, mais simples e pra minha situação mais eficiente.

O HTML ficou assim:

TEXTO PURO
HTML:
  1. <!-- a lista de abas -->
  2.  
  3.     <ul id="abas">
  4.                 <li><a href="#tab1">Aba 1</a></li>
  5.                 <li><a href="#tab2">Aba 2</a></li>
  6.     </ul>
  7.  
  8. <!-- conteudo das abas -->
  9.     <div id="tab1" class="contaba">
  10.     <a name="tab1" />
  11.        Conteudo 1
  12.     </div>
  13.     <div id="tab2" class="contaba">
  14.     <a name="tab1" />
  15.        Conteudo 2
  16.     </div>

O código usando jQuery, somente isso:

TEXTO PURO
JAVASCRIPT:
  1. $(function(){
  2. // abas
  3. // oculta todas as abas
  4. $("div.contaba").hide();
  5. // mostra somente  a primeira aba
  6. $("div.contaba:first").show();
  7. // seta a primeira aba como selecionada (na lista de abas)
  8. $("#abas a:first").addClass("selected");
  9.  
  10. // quando clicar no link de uma aba
  11. $("#abas a").click(function(){
  12. // oculta todas as abas
  13. $("div.contaba").hide();
  14. // tira a seleção da aba atual
  15. $("#abas a").removeClass("selected");
  16.  
  17. // adiciona a classe selected na selecionada atualmente
  18. $(this).addClass("selected");
  19. // mostra a aba clicada
  20. $($(this).attr("href")).show();
  21. // pra nao ir para o link
  22. return false;
  23. });

Com isso economizei alguns kb's deixando de usar o plugin :)

Abraços pessoal e até a próxima!

6 Comentários »

  1. Felipe Diesel said,

    Dezembro 1, 2007 @ 15:53

    Eu tô virando especialista em desconstruir plugins.

    Pego um plugin e vou ceifando ele até ter só o que eu quero! :D

  2. Prototype tabs - abas simples e leves « DGmike said,

    Dezembro 3, 2007 @ 11:54

    [...] 3, 2007 · Arquivado em JavaScript, Programação O Tulio Faria postou uma forma simples de criar um sisteminha simples de abas usando o jQuery. Como eu estou me [...]

  3. ferdinando said,

    Janeiro 8, 2008 @ 16:25

    Meu amigo, parabens pela dica..
    Mais desculpa minha ignorancia, o seu exemplo eso pra mostrar que voce conseguiu eliminar a necessidade do plugin? se foi isso , não pode ser utilizado por outra pessoa? Digo isso, porque o codigo mostrado depende de pelo menos um arquivo css, que não se encontra aqui, e para analisar o que você fez, ta meio dificil.
    Mais parabens pela iniciativa..
    Abraços
    Ferdinando

  4. ferdinando said,

    Janeiro 8, 2008 @ 16:26

    Meu amigo, parabens pela dica..
    Mais desculpa minha ignorancia, o seu exemplo era somente pra mostrar que voce conseguiu eliminar a necessidade do plugin? se foi isso , não pode ser utilizado por outra pessoa? Digo isso, porque o codigo mostrado depende de pelo menos um arquivo css, que não se encontra aqui, e para analisar o que você fez, ta meio dificil.
    Mais parabens pela iniciativa..
    Abraços
    Ferdinando

  5. Tulio Faria said,

    Janeiro 8, 2008 @ 18:13

    Olá Ferdinando,

    o CSS ficaria por conta de quem pegar o script :)

    Na verdade, eu não quis inchá-lo com CSS, deixando livre para quem for usar fazer o seu...

    aqui segue uma implementação que fiz:

    TEXTO PURO
    CSS:
    1. #abas{
    2.   margin: -10px;
    3.   padding: 0;
    4.   width: 100%;
    5. }
    6.  
    7. #abas li{
    8.   display: inline;
    9. }
    10. #abas li a{
    11.   display: block;
    12.   width: auto;
    13.   padding: 3px 8px;
    14.   margin: 0 1px 0 0;
    15.   width: 200px;
    16.   float: left;
    17.   background: url(images/bullet.gif) no-repeat left center;
    18.   color: #797979;
    19.   text-decoration: none;
    20.   text-indent: 5px;
    21. }
    22. #abas li a.selected{
    23.   background: url(images/bullet.gif) no-repeat left center;
    24.   cursor: default;
    25.   font-weight: bold;
    26.   text-decoration: underline;
    27. }
    28.  
    29.  
    30. .contaba{
    31.   clear: both;
    32. }

    Abraços,

  6. Prototype tabs - abas simples e leves « Michael Granados said,

    Fevereiro 6, 2008 @ 23:03

    [...] tabs - abas simples e leves O Tulio Faria postou uma forma simples de criar um sisteminha simples de abas usando o jQuery. Como eu estou me [...]

RSS feed for comments on this post · URI do TrackBack

Deixe seu comentário