Criando conteudo com TABS para sua pagina

Todo Mundo ja viu um conteudo dividido por tabs (guias), eles servem para muitas coisas entre elas mostrar conteudos divididos em uma pagina sem a nescessidade de carregar uma nova pagina e ate mesmo apresentar descrições para diferentes setores de um mesmo conteudo.


Existem muitos scripts na internet que fazem isso, basta implementa-los em sua pagina.
Infelizmente a grande maioria não vem com as informações nescessárias então eu resolvi postar aqui o meu tab script favorito, o jquery id tabs, todos os arquivos que você precisa está nesse site:
sunsean id tabs
aproveite e va na seção " advanced" e teste alguns exemplos do que esse plugin pode fazer.
arquivo do id tabs:
jquery.idTabs.min.js (escolha salvar destino como)
e é claro que você deve carregar o jquery na sua pagina, fique tranquilo a maioria das paginas hoje em dia ja usa esse script e garanto que não vai aumentar o tempo de carregamento da sua pagina significantemente.
baixe o jquery:
JQUERY
pronto agora e so carregar esses arquivos na seção <HEAD> de sua pagina.
assim:
<script type="text/javascript" src="(seu dominio)/jquery(confira o
 nome do arquivo).js"></script>
Não esqueça o tab plugin:
<script type="text/javascript" src="(seu dominio)/jquery.idTabs
.min.js"></script>
logo abaixo desta linha digite:

<script type="text/javascript"> 
  var settings = { start:1, change:false }; 
  $("#adv1 ul").idTabs(settings,true); 
</script>

Cada <a href="#tab"> dentro do elemento da classe class="idTabs"
vai mostrar o elemento com o id="tab". Conforme o codigo de exemplo.


     <div id="usual1" class="usual">

   <div class="tamb">

 <ul class="idTabs">

 <li><div class="taker"><a href="#jquery">jQuery</a></div></li>
 <li><div class="taker"><a href="#official">Tabs 3</a></div></li>
</ul>

</div>

 <div class="shower">

 <div id="jquery">If you haven't checked out ...</div>

 <div id="official">idTabs is only a simple ...</div>

</div></div>



na sua folha de estilos (.css) voce poderá então personalizar as cores e fundos, podendo optar por imagens, cores, animações etc.
#usual1 ul {
 text-align: left;
 list-style-type: none;
 text-decoration: none;
 margin: 3px 0 25px 0px;
 }

#usual1 li {
 text-align: left;
 text-decoration: none;
 margin-top: -2px;
 line-height: 1.6em;
 display: inline;
}

#usual1 .taker a {
 width: 200px;
 height: 15px;
 float: left;
 text-align: center;
 background: #000;
 font: bold 15px tahoma;
 border: 1px solid #888;
 margin: 0 5px 0 5px;
}

#usual1 .taker a:hover {
 background: #c9c9c9;
}

#usual1 .taker .selected {
 background:#fff;
}

Pronto implementando este codigo você podera fazer como nos exemplos da SUNSEAN  ou até mesmo a seção minha conta do site e-calce .
Até a proxima

Nenhum comentário:

Postar um comentário