Hoje mostrarei uma forma extremamente fácil e rápida de criar uma navegação por abas em páginas web.
Veja aqui como vai ficar o exemplo do tutorial finalizado (caso as abas não apareçam, é algum problema com esse servidor gratuito que eu arranjei, rs).
Printscreen das abas:
Utilizaremos neste tutorial jQuery UI. O jQuery UI fornece abstrações de baixo nível de interação e animação, efeitos avançados de alto nível, widgets personalizáveis, construídos em cima da jQuery JavaScript Library, que você pode usar para construir aplicações web altamente interativas (jQuery UI).
Para realizar este tutorial precisaremos da lib jQuery versão 1.4.2, jQuery UI versão 1.8.2 e do css da jQuery UI para montar as abas.
Todos estes arquivos e o projeto realizado neste tutorial, você pode baixar aqui.
Caso prefira fazer os passos do tutorial, baixe o arquivo do projeto e separe em um diretório os arquivos:
Nota 1: Os arquivos .js podem ser baixados no site da jQuery UI, e a pasta "smoothness" é o tema css utilizado para criar as abas, que também pode ser baixado no site.
Nota 2: Note que o arquivo jquery-ui-1.8.2.custom.min.js é a lib da jquery ui customizada para funcionar somente com as abas.
Primeiramente criaremos um arquivo css. Neste arquivo colocaremos alguns comandos apenas para formatar a aba de forma mais "bonita" na tela. A criação deste arquivo é opcional.
main.css
tabs.js
index.html
As abas são criadas com os divs, como você pode observar dentro do <body> do código.
:-)
@update_21/09/2010: Adicionado o printscreen das abas e o link para visualizar as abas funcionando.
Veja aqui como vai ficar o exemplo do tutorial finalizado (caso as abas não apareçam, é algum problema com esse servidor gratuito que eu arranjei, rs).
Printscreen das abas:
Utilizaremos neste tutorial jQuery UI. O jQuery UI fornece abstrações de baixo nível de interação e animação, efeitos avançados de alto nível, widgets personalizáveis, construídos em cima da jQuery JavaScript Library, que você pode usar para construir aplicações web altamente interativas (jQuery UI).
Para realizar este tutorial precisaremos da lib jQuery versão 1.4.2, jQuery UI versão 1.8.2 e do css da jQuery UI para montar as abas.
Todos estes arquivos e o projeto realizado neste tutorial, você pode baixar aqui.
Caso prefira fazer os passos do tutorial, baixe o arquivo do projeto e separe em um diretório os arquivos:
- jquery-1.4.2.min.js
- jquery-ui-1.8.2.custom.min.js
- css/smoothness/*
Nota 1: Os arquivos .js podem ser baixados no site da jQuery UI, e a pasta "smoothness" é o tema css utilizado para criar as abas, que também pode ser baixado no site.
Nota 2: Note que o arquivo jquery-ui-1.8.2.custom.min.js é a lib da jquery ui customizada para funcionar somente com as abas.
Primeiramente criaremos um arquivo css. Neste arquivo colocaremos alguns comandos apenas para formatar a aba de forma mais "bonita" na tela. A criação deste arquivo é opcional.
main.css
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}Em seguida, criaremos um arquivo js para colocar o código jQuery responsável por criar as abas.tabs.js
$(function(){
// Habilita o modo de abas
$('#tabs').tabs();
//Não deixa selecionada a aba quando o usuário clica. (Comente esta parte e veja a diferença)
$('a').click(function() {
$(this).blur();
});
});Agora criaremos o arquivo html.index.html
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Abas - Folder Code</title> <link type="text/css" href="css/smoothness/jquery-ui-1.8.2.custom.css" rel="stylesheet" /> <link type="text/css" href="css/main.css" rel="stylesheet" /> <script type="text/javascript" src="js/lib/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/lib/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="js/tabs.js"></script> </head> <body> <div id="tabs"> <ul> <li><a href="#tabs-1">Aba 1</a></li> <li><a href="#tabs-2">Aba 2</a></li> <li><a href="#tabs-3">Aba 3</a></li> </ul> <div id="tabs-1">Oi, esta é a aba número 1.</div> <div id="tabs-2">Sim, agora estamos na segunda aba!</div> <div id="tabs-3">E essa a 3ª aba. :)</div> </div> </body> </html>Observe atentamente a chamada dos arquivos css e js dentro do <head> do código. Primeiro é feita a chamada do arquivo css do jquery ui, em seguida do arquivo css que criamos, depois a lib do jquery seguida da lib do jquery ui, e por fim, o arquivo js que criará as abas (que também criamos). Siga a risca essa ordem.
As abas são criadas com os divs, como você pode observar dentro do <body> do código.
:-)
@update_21/09/2010: Adicionado o printscreen das abas e o link para visualizar as abas funcionando.
 |
Guilherme Oliveira trabalha com desenvolvimento de software a mais de 10 anos. É técnico em informática, bacharel em ciência da computação, especialista em engenharia de software, além de ser Oracle Certified Java Programmer 6 (OCJP 6). Suas áreas preferidas são desenvolvimento web e games.
|
# by Anônimo - 22 de julho de 2010 às 00:24
Dica muito boa!
Obrigado por compartilhar.
# by Anônimo - 22 de julho de 2010 às 00:28
o captcha para autenticar os comentários não está visível no Firefox. Precisei usar a tecla "Tab" para visualizá-lo. Isto pode diminuir os comentários de seu artigo que elogiei acima.
[]s,
LACA
# by Guilherme - 22 de julho de 2010 às 00:32
Obrigado pelo comentário e pelo aviso.
Verificarei o que está acontecendo com o captcha.
Grato mais uma vez.
Volte sempre :)
# by Anônimo - 17 de agosto de 2010 às 13:08
Obrigada por compartilhar o código. Me ajudou bastante.
# by Fábio Nery Pinto - 20 de setembro de 2010 às 16:26
Parabéns pelo artigo e por compartilhar ele.
# by Guilherme - 21 de setembro de 2010 às 11:23
Agradeço o Feedback. Abraço.
# by Anônimo - 10 de novembro de 2010 às 01:18
Olá! Coloquei esse script no php... o que era para colocar no html eu coloquei em um arquivo php que tenho. Mas acontece o seguinte: as informações da segunda aba aparecem no final da primeira aba e na segunda aba normalmente. E fiz extamente do mesmo jeito q está no html. Será que alguém pode me ajudar? Obrigada!!!
# by Guilherme - 10 de novembro de 2010 às 08:39
Olá,
Sem olhar o seu código fica um pouco dificil de falar o que está acontecendo. Se puder zipar seu código e colocar um link para que possamos visualizar, irá facilitar.
Mas em todo caso, para o conteúdo da Aba 2 aparecer na Aba 1, só pode estar havendo um dos seguintes problemas:
O código que chama a Aba 1 está chamando a 2:
<li><a href="#tabs-1">Aba 1</a></li>
Verifique se não trocou o número da aba que está chamando. O código acima chama o conteúdo do DIV tabs-1.
Ou então, verifique se o código da aba 2 (texto a ser exibido), está realmente na aba 2. Muitas vezes no Ctrl+C / Ctrl+V acabamos copiando alguma coisa errada.
No demais, acho que só olhando o código mesmo pra ter certeza.
[]'s
# by Anônimo - 26 de janeiro de 2011 às 03:55
Obrigado. Procurei isso por muito tempo. [http://www.dimarsantos.com]
# by Alvin - 16 de abril de 2011 às 11:38
Muito Bom!
Gostei bastante!
=D
# by Unknown - 4 de maio de 2017 às 22:39
Olá Guilherme,,,
Executei e gravei os arquivos conforme está no site. Mas ao executar a página HTML não é visualizada conforme a descrição na figura acima.
Posso te enviar os arquivos. Qual o e-mail??