Como criar uma interface com abas em AJAX para HTML5 e CSS3 Programming - dummies

Uma técnica importante no desenvolvimento web HTML5 e CSS3 é o uso de uma interface com guias em AJAX. Isso permite que o usuário altere o conteúdo de um segmento selecionando uma das séries de guias.

Em uma interface com guias, apenas um elemento é visível por vez, mas as abas são visíveis. A interface com abas é um pouco mais previsível do que o acordeão porque as abas (ao contrário dos cabeçalhos do acordeão) ficam no mesmo lugar.

As abas alteram as cores para indicar qual guia está atualmente destacada, e também mudam de estado (normalmente mudando de cor) para indicar que elas estão passando por cima. Quando você clica em outra guia, a área de conteúdo principal do widget é substituída pelo conteúdo correspondente.

Isto é o que acontece quando o usuário clica na guia.

Como o acordeão, o efeito de tabulação é incrivelmente fácil de alcançar. Examine o código:

$ (init); init () {$ ("# tabs"). abas tabs ();}. html

Tab Demo

Livro 1
Livro 2
Livro 3


Livro I - Criando o HTML Foundation







Fundamentos de HTML de som
É tudo sobre validação
Escolhendo suas ferramentas
Gerenciando informações com listas e tabelas
Criando conexões com links
Adicionar imagens
Criando Formulários


Livro II - Estilo com CSS

Colorir seu mundo
Texto de estilo
Seletores, Classe e Estilo
Bordas e Fundos
Níveis de CSS


Livro III - Usando Positional CSS para Layout

Diversão com o Fabulous Float
Construindo Layouts de Páginas Flutuantes
Listas de Estilo e Menus
Usando o Posicionamento Alternativo

O mecanismo para construir uma interface baseada em tabulações é muito semelhante ao de acordeões:

1. Adicione todos os arquivos apropriados.

   Como a maioria dos efeitos jQuery UI, você precisa jQuery, jQuery UI e um arquivo CSS tema. Você também precisa acessar o diretório de imagens para os gráficos de fundo do tema.

2. Crie HTML como normal.

   Se você está construindo uma página da Web bem organizada de qualquer maneira, você já está bem perto.

3. Crie uma div que contém todos os dados com abas.

   Este é o elemento em que você estará fazendo a mágica do jQuery.

4. Coloque as principais áreas de conteúdo em divs nomeados.

   Cada pedaço de conteúdo que será exibido como uma página deve ser colocado em uma div com uma ID descritiva. Cada uma dessas divs deve ser colocada na guia div.

5. Adicione uma lista de links locais ao conteúdo.

   Crie um menu de links. Coloque isso no topo da div entre guias. Cada link deve ser um link local para uma das divs. Por exemplo, o índice se parece com isto:

   
   Livro 1
   Livro 2
   Livro 3
   
   

6. Crie uma função init () como de costume.

   Use as técnicas jQuery normais.

7. Chame o método das abas () na div principal.

   Incrivelmente, uma linha de código jQuery faz todo o trabalho.