Wie eine Tabbed-Schnittstelle in AJAX für HTML5 und CSS3 Programmierung Build

Eine wichtige Technik in HTML5 und CSS3 Web-Entwicklung ist die Verwendung einer Oberfläche mit Registerkarten in AJAX. Dies ermöglicht es dem Benutzer, den Inhalt eines Segments zu ändern, indem eine aus einer Reihe von Laschen auswählen.

In einer Oberfläche mit Registerkarten, nur ein Element zu einem Zeitpunkt, zu sehen, aber die Tabs sind sichtbar. Die Oberfläche mit Registerkarten ist ein wenig berechenbarer als das Akkordeon, weil die Laschen (im Gegensatz zu den Überschriften Akkordeon) an der gleichen Stelle bleiben.

Die Registerkarten Farben ändern, um anzuzeigen, welche Register aktuell markiert ist, und sie auch ihren Zustand ändern (in der Regel durch Farbwechsel), um anzuzeigen, dass sie schwebte über werden. Wenn Sie eine andere Registerkarte klicken, wird der Hauptinhaltsbereich des Widgets mit dem entsprechenden Inhalt ersetzt.

bild0.jpg

Dies ist, was passiert, wenn der Benutzer auf die Registerkarte klickt.

image1.jpg

Wie das Akkordeon ist die Registerkarte Effekt unglaublich einfach zu erreichen. Schauen Sie über den Code:

 tabs.html
Tab Demo
Buch I - Erstellen der HTML-Stiftung
  1. Ton HTML Foundations
  2. Es ist ganz über Validation
  3. Wählen Sie Ihre Werkzeuge
    4.  
  4. Verwalten von Informationen mit Listen und Tabellen
  5. Anschließen von Geräten in Verbindung mit Links
  6. Hinzufügen von Bildern
  7. Erstellen von Formularen
Buch II - Styling mit CSS
  1. Coloring Your World
  2. Styling Text
  3. Selektoren, Klasse und Stil
  4. Rahmen und Hintergrund
  5. Levels von CSS
Buch III - Verwenden von Positional CSS-Layout für
  1. Spaß mit dem Fabulous Float
  2. Gebäude Floating-Seitenlayouts
  3. Styling Listen und Menüs
    4.  
  4. Mit alternativen Positionierung

Der Mechanismus zum Erstellen einer Tabula basierte Schnittstelle ist sehr ähnlich dem für Akkordeons:

  1. Fügen Sie alle entsprechenden Dateien.

    Wie die meisten Effekte jQuery UI, müssen Sie jQuery, jQuery UI, und ein Thema CSS-Datei. Sie müssen auch den Zugriff auf die Bilder Verzeichnis für die Hintergrund-Grafiken des Themas.

  2. Erstellen Sie HTML als normal.

    Wenn Sie eine gut organisierte Webseite sowieso Gebäude sind, sind Sie schon ziemlich nahe.

  3. Bauen Sie ein div, die alle Registerkarten Daten enthält.

    Dies ist das Element, das Sie auf die jQuery-Magie tun.

  4. Legen Sie das Hauptinhaltsbereiche in dem Namen divs.

    Jeder Inhalt, der als einer Seite angezeigt werden, sollten in einem div mit einem beschreibenden ID platziert werden. Jede dieser divs sollte in die platziert werden Tab div.

  5. Fügen Sie eine Liste der lokalen Links zum Inhalt.

    Bauen Sie ein Menü mit Links. Legen Sie diese an der Spitze des Tabbed div. Jede Verbindung sollte eine lokale Verbindung zu einem der divs sein. Zum Beispiel sucht der Index wie folgt aus:

  6. Buch 1
  7. buchen 2
  8. buchen 3

  9. Bauen Sie sich ein drin() Funktion wie gewohnt.

    Verwenden Sie die normalen jQuery-Techniken.

  10. Ruf den tabs () Verfahren auf der Haupt div.

    Erstaunlicherweise hat eine Zeile von jQuery-Code die ganze Arbeit.

Ähnliche

Menü