[TUTORIAL] Exibição de conteúdo por abas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

  • 0

[TUTORIAL] Exibição de conteúdo por abas

Mensagem por seender em 17/03/13, 11:31 pm



Exibir conteúdo por abas

Muitas vemos conteúdos que são expostos atráves de abas, ao clicar em uma é um conteúdo ao clicar em outra já é outro conteúdo, com este tutorial iremos aprender a criar esta exibição de conteúdo por abas, e o melhor, nem precisa de carregar outra página para mostrar um conteúdo diferente!


--> Tutoriais, dicas e astúcias <--
Exibição de conteúdo por abas


- Código a ser utilizado:
  • Códigos CSS para uma melhor exibição do conteúdo e das abas:
    Código:
    <style>div.aba {
       background:#fff;
       text-align:justify;
       margin-bottom:20px;
       padding:10px 15px;
       border:1px solid #CcC;
       box-shadow:inset 1px 1px 2px #999;
       border-radius:4px;
       }
    #navebar {
       font:bold 12px Georgia, "Times New Roman", Times, serif;
       margin:0;
       padding:3px 0;

       }
    #navebar li {
       list-style:none;
       margin-right:6px;
       display:inline;
       }
    #navebar li a {
       padding:3px 6px;
       border:1px solid #09F;
       border-bottom:none;
       background:#dde;
       color:#333;
       text-decoration:none;
       }
    #navebar li a:hover {
       color:#000;
       background:#aae;
       border-color:#09F;
       }
    #navebar li a.ativo {background-color:#009;}
    #navebar li a {
           color: #FFF;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
        background-color: #1AB8D6;
        border-radius: 6px;
        padding: 10px 6px 10px;
        display: block;
       width:120px;
        border-width: 1px 1px 3px 1px;
        border-style: solid;
        border-color: rgba(0,0,0,0.16);
        box-shadow: inset 0 0 2px rgba(255,255,255,0.76);
        -webkit-transition: background-color 0.5s;
        -moz-transition: background-color 0.5s;
        -o-transition: background-color 0.5s;
       display:inline-block;
        transition: background-color 0.5s;
       }
        #navebar li a:hover {    background-color: #22D5E7;}</style>

  • Abas e seu conteúdo.
    <script>
    jQuery(document).ready(function(){
    jQuery('#seender_abas').prepend(
    '<ul id="navebar"> <li><a class="ativo">Aba 1</a></li> <li><a>Aba 2</a></li></ul>')

    jQuery('.aba').css({
    display: 'none',
    marginTop: 0,
    borderTopWidth: 0
    })

    jQuery('#aba1').css('display', 'block');

    jQuery('a', jQuery('#navebar')).click(function() {
    var i = jQuery('a', jQuery('#navebar')).index(this) + 1;
    jQuery(this).parents('#seender_abas').children('.aba:visible').hide();
    jQuery('#aba' + i).show();
    jQuery(this).parents('#navebar').find('a').removeClass('ativo');
    jQuery(this).addClass('ativo');
    })
    })
    </script><div id="seender_abas">

    <div id="aba1" class="aba">
    Conteúdo da aba 1. </div>

    <div id="aba2" class="aba">
    Conteúdo da aba 2.
    </div>



    </div>

Preto -> Título da aba.
Sublinhado -> O código que deverá ser multiplicado para adicionar mais de uma aba.
Italico -> O código que terá de multiplicar para que seja adicionado o conteúdo a nova aba criada. Recomenda-se que a cada nova aba criada (multiplicando o sublinhado) também se multiplique o código em italico.
Vermelho -> O contéudo referente a aba.


- Aplicação do código:
O código poderá ser aplicado em vários locais, para mais informações leia o tutorial referente ao local de possível adição:


  • Resultado:






© Fórum dos Fóruns & seender


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Exibição de conteúdo por abas
avatar

seender
Principal contribuidor
Principal contribuidor

Masculino
Inscrito dia : 07/04/2009
Mensagens : 9450
Pontos Ativos : 12457

Ver perfil do usuário http://www.divulgamaisweb.com https://www.facebook.com/Divulga-Mais-Web-874814432638426/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo


Permissão deste fórum:
Você não pode responder aos tópicos neste fórum