jQuery tabs – abas simples e leve

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:

  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:

javascript
< view plain text >
  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!

30 Comment

  1. Eu tô virando especialista em desconstruir plugins.

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

  2. […] 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. 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. 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. 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:

    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. […] 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 […]

  7. OLá
    Haveria alguma maneira de não rolar a página ao clicar.

  8. Opa kara.
    Obrigado pela dica.

  9. Cara muito legal bem leve, so uma coisa na linha 10 , no evento onclick você inicia uma funcão mas não finaliza…

    ficaria assim:

    // quando clicar no link de uma aba
    $(“.abas a”).click(function(){
    // oculta todas as abas
    $(“div.contaba”).hide();
    // tira a seleção da aba atual
    $(“.abas a”).removeClass(“selected”);
    // adiciona a classe selected na selecionada atualmente
    $(this).addClass(“selected”);
    // mostra a aba clicada
    $($(this).attr(“href”)).show();
    });
    ….

  10. Salve Tulio
    Muito bom e economico o artigo, mas estou com uma duvida, caso eu queira inserir efeitos na transição, onde devo coloca-los?

    Usava o outro metodo que ja incluia os efeitos, com esse dei uma perdida.
    Se puder esclarecer fico grato.
    Abraços

  11. Boa Tulio, é realmente desnecessário usar plugin para coisas simples e que você não vai utilizar tão cedo todas as funções que a mesma oferece e por fim fica com alguns kilos a mais na página.

    Só notei que no código js que disponibilizou, tem um erro de sintaxe. Falta fechar a primeira função.

    Fora isso, parabéns e até!

  12. Seus comentários no meio do código dificultam a leitura, seria interessante se você separasse-os.

  13. Mto bom cara…
    fiz apenas uma alteraçao pegando o id pelo rel e nao pelo href…

  14. Tulio, muito bom!!

    Agora me dê uma dica como ficaria isso com FieldSet em vez de Div

    Seus dados pessoais

    Seus dados Bancarios

    Obrigado 🙂

  15. Tulio, muito bom!!

    Agora me dê uma dica como ficaria isso com FieldSet em vez de Div

    <form id="Cadastro">
    <fieldset id="DadosPessoais">
    <label for="g">Seus dados pessoais</label>
    <input type="text" name="primeiroNome" />
    <input type="text" name="sobreNome" />
    </fieldset>
    <fieldset id="DadosBancarios">
    <label for="g">Seus dados Bancarios</label>
    <input type="text" name="numConta" />
    <input type="text" name="numAgencia" />
    </fieldset>
    </form>

    Obrigado 🙂

  16. Cara, muito obrigado por esse exemplo.
    Bem simples e aplicável, sem necessidade plguins, ótimo!

    Valeu!

  17. Vlw D+, me deu a maior força aqui..
    T+

  18. Até funcionou, mas eu tentei usar 2 lances com abas, aproveitando o código… no internet explorer dá um bug muito doido…

  19. Brother tu já usou este http://www.stilbuero.de/jquery/tabs/#fragment-3?

    Sabe como faço pra alterar o CSS? pq tipo no código ele ñ fiz o CSS da tab ativa ou desativada, qm faz isso é o javascript mas o código ta todo louco pra ngm mecher…

  20. cara eu preciso de algo bem assim
    so que tipo eu vou colocar em uma
    videos aleatorios
    e na outra ultimos videos
    dai tipo quando atualizar a pagina não volte para a primeira aba mas continue na aba clicada. e tambem que a paginação troque as paginas normal.
    alguem pode me ajudar nisso.???
    podemos ate acertar um valor valeu

  21. Código legal, mas seu exemple está faltando }) depois do return false

  22. Alguém ja utilizou botão para disparar um evento e continuar na aba selecionada?

  23. Exemplo bacana e funcional.

    Porem tive um pouquinho de dificuldade para entender,
    para quem tiver este mesmo problema segue abaixo o exemplo proposto

    ————————-

    Untitled Document

    $(function(){
    // abas
    // oculta todas as abas
    $(“div.contaba”).hide();
    // mostra somente a primeira aba
    $(“div.contaba:first”).show();
    // seta a primeira aba como selecionada (na lista de abas)
    $(“#abas a:first”).addClass(“selected”);

    // quando clicar no link de uma aba
    $(“#abas a”).click(function(){
    // oculta todas as abas
    $(“div.contaba”).hide();
    // tira a seleção da aba atual
    $(“#abas a”).removeClass(“selected”);

    // adiciona a classe selected na selecionada atualmente
    $(this).addClass(“selected”);
    // mostra a aba clicada
    $($(this).attr(“href”)).show();
    // pra nao ir para o link
    return false;
    })
    });

    #abas{
    margin: -10px;
    padding: 0;
    width: 100%;
    }
    #abas li{
    display: inline;
    }
    #abas li a{
    display: block;
    width: auto;
    padding: 3px 8px;
    margin: 0 1px 0 0;
    width: 200px;
    float: left;
    background: url(images/bullet.gif) no-repeat left center;
    color: #797979;
    text-decoration: none;
    text-indent: 5px;
    }
    #abas li a.selected{
    background: url(images/bullet.gif) no-repeat left center;
    cursor: default;
    font-weight: bold;
    text-decoration: underline;
    }
    .contaba{
    clear: both;
    }

    Aba 1
    Aba 2

    Conteudo 1

    Conteudo 2

    ————————-

  24. Realmente muito leve sua implementação! Parabéns!

  25. muito bom amigo ele fico bem mais leve que o UI e be mais facil de se estilizar 🙂

  26. Pessoal,
    Tentei diversas vezes e não funcionou. Acredito que ja foram tantas alterações (correções) no código que já fiquei perdido.
    Acredito que seria muito bem vindo um “código final”, devidamente testado e com as correções citadas pelos usuários acima.
    Obrigado.

  27. […] DGmike on 03/12/2007 O Tulio Faria postou uma forma simples de criar um sisteminha simples de abas usando o jQuery. Como eu estou me […]

  28. Parabéns pelo post.

    Muito útil e bem simples!

Deixe uma resposta