Como usar jQuery para criar uma interface com abas em CSS3

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.

$ (Function () {// Criar variáveis ​​para armazenar TabHeads data.var temporárias = "" -var TabContent = "" -.. // Obter o arquivo de dados XML e processá-la $ get ( "XMLTabData.xml", function ( dados) {// Localize cada entrada da rubrica e usá-lo para // criar um título guia. $ (dados) .find ( "título"). each (function () {TabHeads + = "
"+ $ (This) .attr (" caput ") +"
"-}) - // Anexar os dados para a área de título $ (." # Títulos ") anexa (TabHeads) -. // Localize cada entrada de conteúdo e usá-lo para // criar o conteúdo guia de US $ (dados).. encontrar ( "conteúdo"). each (function () {TabContent + = "
"+ $ (This) .text () +"
"-}) - // Anexar os dados para a área de conteúdo guia $ (." # Tabs ") anexa (TabContent) -. // Complete o processo, exibindo as guias // $ (." # Tabs ") guias. () -}) -}) -

O código começa criando duas variáveis: TabHeads e TabContent, para conter os dados usados ​​para preencher a interface com abas. Esta informação é eventualmente adicionado a 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 é passada 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á completa, por isso age como um retorno de chamada para um conjunto de dados assíncronos ler.

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 dentro de cada guia. Neste caso, Tab 1 seria um título e # 147 Isto é algum conteúdo para Tab 1. # 148- seria o conteúdo da guia.

Todas as informações de posição aparece dentro do elementos. O código pede jQuery para encontrar () cada um dos elementos e processá-los um de cada vez, utilizando o método each (). A cada () método cria um laço que fornece automaticamente acesso ao indivíduo elementos por meio do esta variável. posições 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 na

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 da guia. O método cada () cria o circuito utilizado para processar cada elemento de um de cada vez.