jQuery Plugin jTabk
O jTabk é um plugin que criei para auxiliar a animação em Tabs.
Pode utilizar também setas para passar as Tabs, segue abaixo o dois links, com e sem setas.
É bem simples sua utilização, só é preciso seguir umas regras de formatação de classes. Veja o link da aplicação DEMO
Agora veja o link com setas: DEMO
Navegadores: IE7+ / FF4+ / Chrome / Safari / Opera
Incluir Javascript:
<script type="text/javascript" src="{seu_diretorio}/jtabk.js"></script> <script type="text/javascript"> $(function(){ $("#jtabk").jtabk(); }); </script>
API de Referência:
var defaults = { arrows: { left: "", right: "" } };
Defaults
left: // Usado para chamar a ação de setas para a voltar right: // Usado para chamar a ação de setas para a avançar
HTML:
</pre> <div id="jtabk"> <ul id="jtabk-menu"> <li>Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li> </ul> <div class="jtabk-panel jtabk-active">Conteudo 1</div> <div class="jtabk-panel">Conteudo 2</div> <div class="jtabk-panel">Conteudo 3</div> <div class="jtabk-panel">Conteudo 4</div> </div> <pre>
O PLUGIN
Pra chamar a função identifique primeiro o ID do Tab que irá ser utilizado.
$("#jtabk").jtabk();
Vamos para as partes obrigatórias do Plugin:
– O ID jtabk-menu e na lista UL e as classes jtabk-panel no corpo da Tab são obrigatórias.
– A classe jtabk-active marca a Tab atual. (É fundamental essa classe no código; você pode colocar ela em qualquer Tab, sendo assim a primeira a ser mostrada.)
USO DAS SETAS
Nos parâmetros você pode colocar ID ou class, no caso foram utlizados IDs, veja exemplo:
$("#jtabk").jtabk({ arrows: { left: "#left", right: "#right" } });
Veja o HTML das setas:
<div id="setas"> <a id="left" href="javascript:;"><img src="imgs/left.png" alt="" /></a> <a id="right" href="javascript:;"><img src="imgs/right.png" alt="" /></a> </div>
Segue o Código Completo das Tabs simples: DEMO
Download do código Tab: LINK
Segue o Código Completo das Tabs com Setas: DEMO
Download do código Tab com setas: LINK
DOWNLOAD do jTabk Versão: 1.0
Minified e Uncompressed Code