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

Tags: jQuery, Plugins, javascript
Via tedk.com.br

Total de comentários: 0
avatar