Login:

iMasters | Por uma internet mais criativa e dinâmica

Feeds

Javascript

Feed da seção Javascript

Newsletter de Javascript


Sexta-feira, 03/06/2005 - 12:39 - Por Leonardo Fortunato
Seções relacionadas:

Utilização de Abas

Esse é meu primeiro artigo no iMasters e nele vou mostrar como desenvolver uma navegação em abas utilizando um código simples e fácil de ser personalizado. O exemplo foi testado no Internet Explorer 5.x ou superior e Mozilla Firefox 1.0 ou superior.

Nosso resultado final será como este.

Estilos

Inicialmente vamos trabalhar os estilos CSS. Você pode alterá-los de acordo com o esquema de cores do site onde você vai utilizar. Tome cuidado para não alterar as posições das bordas para manter o efeito da aba.

Código Javascript

O código também é bem simples. Inicialmente teremos que preencher um vetor com as abas, inserindo o id da célula do menu que representa aquela aba, e o id da <div> onde será colocado o conteúdo da aba.

Linhas 56 a 60 - Essa função define uma estrutura simples que será utilizada para preencher o vetor com as informações das abas.

Linha 62 - Definimos a variável arAbas como sendo um novo vetor/matriz. É essa a variável onde ficarão as informações das abas.

Linhas 63 a 65 - Preenchemos o vetor arAbas com as informações de cada uma das abas que iremos construir. Para isso utilizamos a estrutura criada, colocando no primeiro parâmetro o id da célula onde estará o item do menu daquela aba e no segundo parâmetro o id da div que contém o conteúdo da aba.

Linha 67 - Iniciamos a função AlternarAbas que recebe por parâmetros qual o id do menu e o id da div com o conteúdo da aba que queremos acessar.

Linha 69 - Início do for que vai passar por todos os ítens do vetor.

Linhas 71 e 72 - Atribuimos à variável m o item do menu e na linha de baixo mudamos o estilo para "menu" (torna todos os itens não selecionados).

Linhas 73 e 74 - Atribuimos à variável c as div"s com os conteúdos e na linha de baixo tornamos a div invisível.

Linhas 76 e 77 - Atribuimos à variável m o item do menu que selecionamos e na linha de baixo mudamos o estilo para "menu-sel" (seleciona o item).

Linhas 78 e 79 - Atribuimos à variável c a div do conteúdo que queremos exibir e na linha de baixo tornamos ela visível.

HTML

No código HTML montamos uma tabela onde na primeira linha colocamos as colunas com cada opção do menu e na linha de baixo uma única célula onde são colocadas todas as div"s com os conteúdos.

Linha 86 - No <body> colocamos a opção onLoad chamando a função AlternarAbas referenciando a aba que desejamos que seja mostrada quando a página for carregada.

Linhas 93 e 94 - Aqui definimos uma célula que conterá um item do menu. definimos na propriedade id o nome pelo qual esse item será referênciado na função Javascript e na opção onClick colocamos a chamada da função AlternarAbas fazendo referência a esta aba.

Linha 111 - Criamos uma div onde será colocado o código de uma aba. Definimos o id e definimos na propriedade style que essa div será invísivel.

Finalizamos nosso exemplo. Para visualizá-lo pronto clique aqui.

Espero que tenham gostado desse meu primeiro artigo.

Qualquer dúvida entrem em contato comigo, e mandem sugestões de novos assuntos a serem abordados.

Todos os artigos de Leonardo Fortunato

6 comentários publicados

  • 1. Excelente

    Sábado, 04/06/2005, por Rogério Louzada

    Muito boa! Parece as abas das seções do iMasters. E o mais importante: o código funciona perfeitamente. Pelo menos pra mim, será muito útil. Valeu!

    Responder comentário

  • 2. Fantástico

    Quinta-feira, 23/06/2005, por Frederico Madeira

    Com certeza um script de muita utilidade. O autor está de parabéns.

    Responder comentário

  • 3. Como editar

    Domingo, 03/07/2005, por Luciano Paranhos

    Gostaria de saber como faço para editar e colocar os formulários dentro da abas

    Responder comentário

  • 4. Não alterar a aba selecionada em um PostBack

    Sábado, 31/12/2005, por Alessandro Marçal

    Como faço para manter a aba que está selecionada quando a página sofre uma atualização?

    Responder comentário

  • 5. Script simples e bem funcional

    Sexta-feira, 13/01/2006, por Helton Eduardo Ritter

    Bom. Parabéns, obrigado por contribuir com a comunidade. Em breve (fevereiro de 2006) usarei este recurso no portal que estou reestruturando. Abraço.

    Responder comentário

  • 6. Boa!

    Sexta-feira, 21/07/2006, por Vitor Oliveira

    Excelente Matéria sobre abas. Bem detalhada e explicada. Tá de parabens, vlw !!

    Responder comentário

Poste um comentário


Os textos publicados neste espaço são de responsabilidade única de seus autores (colunistas e leitores) e podem não expressar necessariamente a opinião do iMasters.

Sobre o autor

Leonardo Fortunato é técnico pelo Colégio Técnico Industrial da Unesp/Bauru, trabalhou com ColdFusion/Javascript/SQL Server nos Correios durante 1 ano e, a partir de 2005, é desenvolvedor de sistemas em PHP/Javascript/Oracle da Servimed. Cursando também Sistemas de Informação na Unesp.


Indique para um amigo

captcha

TI SHOP Produtos iMasters

  • Lançamento: CD-ROM Treinamento Aplicado de SQL - Lançamento! Treinamento Aplicado de SQL - Aprenda a trabalhar com SQL com bancos de dados Oracle e SQL Server. São mais de 100 tópicos explicados por Mauro Pichilliani, um articulistas mais lidos do iMasters. Aproveite! Apenas R$ 69,90 no TI SHOP.
  • Lançamento: Livro iMasters "O Encontro de 2 Mundos"- Este livro conta com 56 crônicas de profissionais mais admirados e influentes do mercado brasileiro de Internet. Aproveite o preço especial para leitores do iMasters. Apenas R$ 40,00 e envio imediato!
  • DVD Curso Completo de Photoshop - Do conceito à finalização Lançamento! Curso Completo de Photoshop, em DVD, com mais de 230 aulas dividas em 4 módulos: conceito, básico, avançado e finalização. Apenas R$ 69,50 no TI SHOP - Frete com 50% de desconto
  • DVD Javascript Starter - Curso Completo Com mais de 9 horas de vídeo-aulas, é um curso completo sobre Javascript. Ideal para quem deseja aprender a linguagem. Apenas R$ 64,90 no TI SHOP - Frete com 50% de desconto!

2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.