Como construir uma interface com abas em AJAX para HTML5 e CSS3 Programação

Uma técnica importante no desenvolvimento web HTML5 e CSS3 é o uso de uma interface com abas em AJAX. Isto permite ao utilizador alterar o conteúdo de um segmento, seleccionando uma de uma série de abas.

Em uma interface com abas, apenas um elemento é visível de cada vez, mas os guias 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) ficar no mesmo lugar.

As guias mudam de cor para indicar qual guia está marcado, e eles também mudam de estado (normalmente mudando a cor) para indicar que eles estão sendo pairado sobre. Quando você clicar em outra guia, a área de conteúdos do widget é substituído com o conteúdo correspondente.

image0.jpg

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

image1.jpg

Tal como o acordeão, o efeito separador é incrivelmente fácil de alcançar. Olhar sobre o código:

 tabs.html

tab Demonstração

Livro I - Criação da Fundação HTML

  1. Fundações HTML som
  2. É toda sobre Validação
  3. Escolhendo suas Ferramentas
  4. Gestão da Informação com listas e tabelas
  5. Fazendo conexões com links
  6. adicionando imagens
  7. Criação de formulários

Livro II - Styling com CSS

  1. Colorir o mundo
  2. styling Texto
  3. Seletores, classe e estilo
  4. Borders and Backgrounds
  5. Níveis de CSS

Livro III - Usando CSS posicional para layout

  1. Diversão com o Float Fabulous
  2. Construção Floating Layouts de página
  3. As listas de estilo e menus
  4. Usando Posicionamento alternativa

O mecanismo para a construção de uma interface baseada separador é muito semelhante ao de acordeão:

  1. Adicione todos os arquivos apropriados.

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

  2. Criar HTML como normal.

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

  3. Criar uma div que contém todos os dados tabulados.

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

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

    Cada parte do conteúdo que será exibido como uma página deve ser colocado em uma div com um ID descritivo. Cada um destes divs deve ser colocado na aba div.

  5. Adicionar uma lista de links locais para o conteúdo.

    Criar um menu de links. Coloque isso no topo da div com abas. Cada link deve ser uma ligação local para um dos divs. Por exemplo, o índice parece com isso:

  6. livro 1
  7. livro 2
  8. livro 3
  9. construir uma nisso() função como habitualmente.

    Use as técnicas normais jQuery.

  10. Ligar para tabs () método no div principal.

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

menu