Wie Verwenden von jQuery eine Tabbed-Schnittstelle in CSS3 zu erstellen

Für einige Websites eine Oberfläche mit Registerkarten ist die beste Methode, um die Informationen anzuzeigen. CSS3 hat Code die jQuery-Methode verwenden, um eine Oberfläche mit Registerkarten zu erstellen.

$ (Function () {// Variablen Erstellen Sie temporäre data.var TabHeads zu halten = "" -var TabContent = "" -.. // Beziehen Sie die XML-Datendatei und zu verarbeiten $ erhalten ( "XMLTabData.xml", Funktion ( Daten) {// jeder Überschrift Eintrag lokalisieren und verwenden sie eine Reiter erstellen, um //. $ (Daten) .find ( "Überschrift"). each (function () {TabHeads + = "
 
"+ $ (This) .attr (" Titel ") +"
"-}) - // Fügen Sie die Daten an den Kopfbereich $ (." # Rubriken ") anhängen (TabHeads.) - // Jeden Inhalt Eintrag suchen und es verwenden, um // die Registerkarte Inhalt erstellen $ (Daten).. finden ( "Inhalt"). each (function () {TabContent + = "
"+ $ (This) .text () +"
"-}) - // Fügen Sie die Daten auf die Registerkarte Inhalt $ (." # Tabs ") anhängen (TabContent.) - // Den Vorgang ab, indem Sie die // Tabs anzeigt $ (." # Tabs ") Registerkarten. () -}) -}) -

Der Code beginnt mit der Schaffung von zwei Variablen: TabHeads und TabContent, die Daten enthalten, die in der Oberfläche mit Registerkarten zu füllen. Diese Informationen werden schließlich zu zwei HTML-Tags hinzugefügt, wie hier gezeigt:

Die Methode get () erhält die XML-Datei, XMLTabData.XML und platziert den Inhalt in Daten. Welche Daten enthält, ist ein vollständig XML-Datei gebildet, die zu einer anonymen Funktion übergeben wird (eine, die keinen Namen hat), die Sie definieren als: function (data) {}. Die Funktion wird ausgeführt, wenn die Datenwiederherstellung abgeschlossen ist, so wirkt es als Callback für einen asynchronen Daten lesen.

Alles, was Sie für den Moment wissen müssen, ist, dass die XML-Datei enthält Elemente, die die Daten zum Erstellen der Registerkarte Einträge enthalten, sowie Elemente, die die Daten in den einzelnen Registerkarten angeordnet enthalten. In diesem Fall Tab 1 wäre eine Überschrift und # 147-Dies ist einige Inhalte für Tab 1. # 148- würde für die Registerkarte Inhalt sein.

Alle Informationen der Überschrift erscheint innerhalb der Elemente. Der Code fragt jQuery () jede der zu finden Elemente und sie ein zu einer Zeit, mit der jede () -Methode verarbeiten. Die jeweils () -Methode erstellt eine Schleife, die automatisch den Zugriff auf einzelne bietet Elemente durch die diese Variable. Tab Schriften sind in einer ungeordneten Liste gespeichert (

), Überschriften, ist das bereits der HTML-Code für die Beispielseite Teil.

Der Inhalt für jede Registerkarte erscheint in

Wie bei den Überschriften verwendet der Code finden (), die jeweils die zu lokalisieren Elemente in der XML-Datei und wandeln sie in der HTML erforderlich, um die Registerkarte Inhalt zu erstellen. Die jeweils () Methode erstellt die Schleife verwendet, um jedes Element ein zu einer Zeit zu verarbeiten.