Simple Tabs – Tabs com JavaScript
Postado por: Pedro Rogério emSimple Tabs é um ótimo recurso para você que deseja desenvolver um sistema de tabs em sua página sem o uso de Frameworks JavaScript, bom por um lado que você evita possíveis conflitos de JavaScript e o tamanho do arquivo JavaScript é bem reduzido, cerca de 6KB. Esse script também é muito interessante no ponto de que ele “recorda” a última tab que você acessou ao voltar a página.
Sua utilização é muito simples, basta você fazer o uso dos arquivos simpletabs.js e simpletab.css e criar um estrutura XHTML semelhante a essa:
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<div class="simpleTabsContent">Conteúdo referente a "Tab 1".</div>
<div class="simpleTabsContent">Conteúdo referente a "Tab 2".</div>
<div class="simpleTabsContent">Conteúdo referente a "Tab 3".</div>
</div>
Vejam agora o exemplo do script em funcionamento. Se você quiser pode também efetuar o download dos arquivos utilizados no exemplo.
Via: Intenta
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
É impressão minha ou não roda no iE7+?
@Vinícius,
Acabei de descobrir isso agora, não funciona no IE.
O problema desses scripts é colocar os títulos fora da sequencia do conteúdo. Eles vêm primeiro, depois vem o texto. Deveriam vir em sequencia…
Fiz um script em Jquery que cria abas em formulários. Assim dá para dividi-los em etapa. Nesse caso, usei o fieldset e legend para formar as abas. Se o Js estiver desabilitado, aparecerá os fieldsets bonitinhos. Se estive habilitado, aparecerá as abas.
O único problema é que ele não funciona com mais de 1 form na página. Se tiver mais de 1 form, vc tem que invocar 2 vezes. $(‘form’).fieldTabs(); não funciona com mais de 1 form. $(‘#form1′).fieldTabs(); é a solução nesse caso.
Se alguém souber como resolver isso… :)
Ai vai o código:
(function($) {
$.fn.fieldForms = function(options) {
var opts = $.extend({}, $.fn.fieldForms.defaults, options);
return this.each(function(x) {
$this = $(this);
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// 1. funcao para pegar o escrito de cada tag ‘legend’ e separar todos em array
$legendas = [];
$(this).find(‘fieldset legend’).each(function(i) { $legendas[i] = $(this).text(); $(this).hide(); });
if ($legendas.length>0) {
montaAbas($legendas);
ativaAbas(o.abaAtiva);
}
// 2. recebe o array com os textos das tags ‘legend(s)’ e cria as abas para a navegacao
function montaAbas($legendas) {
var $html = ”;
for (var $x=0; $x<$legendas.length; $x++) {
$html += ”+$legendas[$x]+’ – ‘;
}
$this.find(‘fieldset’).eq(0).before(”+ $html +”);
$this.find(‘.aba’).each(function(i) {
$(this).click( function() { ativaAbas(i); } );
});
}
// 3. funcao invocada quando se clica na aba reponsavel por fazer a navegacao entre ‘fieldset(s)’
function ativaAbas($indice) {
ocultaCampos();
$this.find(‘fieldset’).eq($indice).show();
}
// 4. funcao para ocultar todos ‘fieldset(s)’
function ocultaCampos() {
$this.find(‘fieldset’).hide();
}
});
};
$.fn.fieldForms.defaults = { abaAtiva: 0 };
})(jQuery);
Amigo, o seguinte erro por não estar aparecendo no IE7+ é por que no final do código javascript ele estava pedindo mais um parametro.
Veja que retirando a “,”(virgula) do final da chave, ele nao ira mais acusar erro no código e funcionara perfeitamente no IE7+.
Resumindo:
[ANTES]
},
// END
};
// Load SimpleTabs
simpleTabs.addLoadEvent(simpleTabs.init);
==============================================================
[CORRIGIDO]
}
// END
};
// Load SimpleTabs
simpleTabs.addLoadEvent(simpleTabs.init);
Fica ai o ajuste.
Abraços.
Contato: nandumeyer@hotmail.com
Fernando Meyer – Updown Web!
Muito legal esse esquema de tabs, mas no q diz respeito a Usabilidade, será q os usuários são capazes de identificar as tabs e browsear pra ver todo o conteúdo? Se eles naum perceberem, acabamos escondendo conteúdo deles, aí é melhor nem usar…
Acho q isso vale a pena só pra forms mesmo, pra naum carregar a tela com muitas opções e confundir/desanimar o usuário.
Aew pessoal, eu sou novo em javascript, JQuery e etc…tenho uma duvida, como faço pra deixar um tamanho fixo independente do conteudo escrito???
Abraço
Quem puder por favor me manda um e-mail
Havia um bug no script, onde quando se colocava alguma div dentro do conteúdo o script entendia esta div como o conteúdo de outra tab e não mostrava ao setar a current tab.
perdi um tempo pra entender e só depois ví que o script está na versão 1.3 e o bug estava resolvido rsss.
de qualquer forma, aos desavisados como eu :), baixem a versão mais atualizada.
Abraço,
Flavio
http://www.spyderit.com.br
Ótima dica! Exatamente o que eu estava procurando :)
Obrigado!
Muito bom. Conhece algum com efeito fade na troca?
Obrigado.