Wie man ein Tabbed Interface in AJAX für HTML5 und CSS3 erstellt Programmierung - Dummies

Eine wichtige Technik bei der HTML5- und CSS3-Webentwicklung ist die Verwendung einer Registerschnittstelle in AJAX. Dadurch kann der Benutzer den Inhalt eines Segments ändern, indem er eine aus einer Reihe von Registerkarten auswählt.

In einer Oberfläche mit Registerkarten ist immer nur ein Element sichtbar, aber die Registerkarten sind alle sichtbar. Die Oberfläche mit Registerkarten ist etwas berechenbarer als das Akkordeon, da die Tabs (anders als die Akkordeonüberschriften) an der gleichen Stelle bleiben.

Die Registerkarten ändern die Farben, um anzuzeigen, welche Registerkarte gerade hervorgehoben ist. Außerdem ändern sie den Status (normalerweise durch Ändern der Farbe), um anzuzeigen, dass sie überfahren werden. Wenn Sie auf eine andere Registerkarte klicken, wird der Hauptinhaltsbereich des Widgets durch den entsprechenden Inhalt ersetzt.

Dies geschieht, wenn der Benutzer auf die Registerkarte klickt.

Wie beim Akkordeon ist der Tab-Effekt unglaublich einfach zu erreichen. Schau Dir den Code an:

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

Registerkarte Demo

Buch 1
Buch 2
Buch 3


Buch I - Erstellen der HTML Foundation







Sound-HTML-Grundlagen
Alles über Validierung
Auswahl Ihrer Tools
Verwaltung von Informationen mit Listen und Tabellen
Herstellen von Verbindungen mit Links
Hinzufügen von Bildern
Erstellen Formen


Buch II - Styling mit CSS

Färben Sie Ihre Welt
Styling Text
Selektoren, Klasse und Stil
Rahmen und Hintergründe
CSS-Stufen


Buch III - Verwenden von Positional CSS für Layout

Spaß mit dem fabelhaften Float
Floating-Seitenlayouts erstellen
Styling-Listen und -Menüs
Alternative Positionierung verwenden

Der Mechanismus zum Erstellen einer tabulatorbasierten Oberfläche ähnelt dem für Akkordeons:

1. Fügen Sie alle passenden Dateien hinzu.

   Wie die meisten jQuery-UI-Effekte benötigen Sie jQuery, jQuery UI und eine CSS-Themendatei. Sie benötigen außerdem Zugriff auf das Bilderverzeichnis für die Hintergrundgrafik des Themas.

2. HTML wie gewohnt erstellen.

   Wenn Sie trotzdem eine gut organisierte Webseite erstellen, sind Sie schon ziemlich nah dran.

3. Erstellen Sie ein div, das alle Tabbed-Daten enthält.

   Dies ist das Element, auf dem Sie die jQuery-Magie ausführen werden.

4. Platzieren Sie die Hauptinhaltsbereiche in benannten Divs.

   Jeder Inhalt, der als Seite angezeigt wird, sollte in einem div mit einer beschreibenden ID platziert werden. Jedes dieser divs sollte in der Registerkarte div platziert werden.

5. Fügt eine Liste lokaler Links zum Inhalt hinzu.

   Erstellen Sie ein Menü mit Links. Platzieren Sie dies oben in der Registerkarte div. Jeder Link sollte ein lokaler Link zu einem der divs sein. Der Index sieht beispielsweise so aus:

   
   Buch 1
   Buch 2
   Buch 3
   
   

6. Erstellen Sie wie gewohnt eine init () - Funktion.

   Verwenden Sie die normalen jQuery-Techniken.

7. Rufen Sie die Methode tabs () in der Haupt-Div auf.

   Unglaublicherweise macht eine Zeile von jQuery-Code die ganze Arbeit.