Como usar jquery para criar uma interface com abas em css3

Video: JQuery Fácil - Interfaces amigáveis com JQuery UI (Aula 1)

Para alguns sites uma interface com abas é o melhor método para exibir as informações. CSS3 tem o código para usar o método jQuery para criar uma interface com abas.

Video: Formulario com tres etapas usando CSS3 e jQuery

$ (Function () {// Criar variáveis ​​para armazenar TabHeads data.var temporários = "-var TabContent = "- // Obter o arquivo de dados XML e processá-la $ get (.."XMLTabData.xml", Function (data) {// Localize cada entrada da rubrica e usá-lo para // criar um título guia. $ (Dados) .find ("título") .each (função () {+ = TabHeads"
" + $ (this) .attr ("rubrica") +"
"-}) - // anexa os dados para a área de título $ (."#Headings") .append (TabHeads) - // Localize cada entrada de conteúdo e usá-lo para // criar o conteúdo guia $ (dados) .find (."Conteúdo") .each (função () {+ = TabContent"
" + $ (This) .text () + "
"-}) - // anexa os dados para a área de conteúdo guia $ (."#tabs") .append (TabContent) -. // Complete o processo, exibindo as guias // $ ("#tabs") .tabs () -}) -}) -

O código começa com a criação de duas variáveis: TabHeads e TabContent, para conter os dados usados ​​para preencher a interface com abas. Esta informação é eventualmente adicionado ao dois tags HTML, como mostrado aqui:

O método get () obtém o arquivo XML, XMLTabData.XML, e coloca o conteúdo em dados. Que dados contém é um arquivo totalmente formado XML que é passado para uma função anônima (um que não tem nome) que você define como: function (data) {}. A função é executada quando a recuperação de dados está completo, por isso age como uma chamada de retorno para um conjunto de dados assíncronos ler.

Video: Tutorial: Criando uma galeria de imagens utilizando CSS & JQuery. Parte 2: CSS

Tudo que você precisa saber para o momento é que o arquivo XML contém elementos que contêm os dados usados ​​para criar as entradas da guia, bem como elementos que contêm os dados colocados no interior de cada guia. Neste caso, Tab 1 seria um título e “Isto é algum conteúdo para Tab 1.” seria o conteúdo desse separador.

Todas as informações do cabeçalho aparece dentro do elementos. O código pede jQuery para encontrar () cada um dos elementos e processá-las uma de cada vez, utilizando o método de cada (). A cada () método cria um circuito que fornece automaticamente o acesso ao indivíduo elementos, através da presente variável. títulos de tabulação são armazenados em uma lista não ordenada (

), Títulos, que já faz parte do HTML para a página de exemplo.

O conteúdo de cada guia aparece em

Video: Criando Sistema de Abas com jQuery

Tal como acontece com os títulos, o código usa find () para localizar cada um dos elementos no arquivo XML e convertê-los para o HTML necessário para criar o conteúdo guia. O método cada () cria o laço usado para processar cada elemento de um de cada vez.