Wie man das Akkordeon-Widget in AJAX für HTML5 und CSS3 Programmierung verwenden




Einige der mächtigsten jQuery Tools sind eigentlich die einfachste in HTML5 und CSS3 Programmierung zu verwenden. Das Akkordeon-Widget ist ein sehr beliebtes Teil der jQuery UI-Toolset werden.

bild0.jpg

Hier finden Sie Buchschriften. Die Einzelheiten für die erste zur Verfügung, aber die anderen Bücher "Details werden ausgeblendet.

image1.jpg

Dieser erstaunliche Effekt ermöglicht es dem Benutzer auf einem bestimmten Teil eines größeren Kontext zu konzentrieren, während die Gesamt Umriss zu sehen. Es nennt sich ein Akkordeon weil die verschiedenen Stücke ausdehnen und zusammenziehen, damit der Benutzer ohne Verlust Ort seiner Lage auf einem Teil zu konzentrieren. Klapp-Inhalt ist zu einem wichtigen Usability-Tool populär von der Systemleiste in Mac OS und anderen gängigen Usability-Tools gemacht werden.

Die Ziehharmonika-Effekt ist verblüffend einfach mit jQuery zu erreichen:

accordion.html  

Akkordeon-Demo


Buch I - Erstellen der HTML-Stiftung

  1. Ton HTML Foundations
  2. Es ist ganz über Validation
  3. Wählen Sie Ihre Werkzeuge
  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. Mit alternativen Positionierung

Wie Sie mit Blick auf den Code sehen können, ist es in erster Linie nur HTML. Der Effekt ist wirklich einfach zu bewerkstelligen:

  1. Importieren Sie alle üblichen Verdächtigen.

    Sie müssen die jQuery und jQuery UI javascript-Dateien, und ein Thema CSS-Datei zu importieren. Sie müssen auch sicherstellen, dass die CSS-Anbindung an die Autobahnen Bilder Verzeichnis mit Icons und Hintergründen, da wird es automatisch einige dieser Bilder verwenden.

  2. Erstellen Sie Ihre HTML-Seite als normal.

    Erstellen Sie eine HTML-Seite, wie Sie normalerweise tun würde. Achten Sie auf die Abschnitte, die Sie zum Einsturz möchten. Es sollte in der Regel eine Überschrift für jedes Element sein, die alle auf dem gleichen Niveau.

  3. Erstellen Sie ein div, die den gesamten zusammenklappbar Inhalt enthält.

    Legen Sie die gesamte zusammenlegbare Inhalt in einem einzigen div mit einer ID. Du wirst drehen, um dieses in ein Akkordeon jQuery Element div.

  4. Fügen Sie um jeweils einen Anker in Richtung Sie als zusammenklappbar angeben möchten.

    Stellen Sie einen leeren Anker-Tag () um jede Position, die Sie als zusammenklappbar Überschrift verwenden möchten. Das Zeichen zeigt an, dass der Anker die gleiche Seite aufrufen und wird als Platzhalter durch die jQuery UI-Engine verwendet. Sie können die Anker direkt im HTML oder durch jQuery-Code hinzufügen.

  5. Erstellen Sie eine jQuery drin()Funktion.

    Verwenden Sie die normalen Techniken, um eine jQuery initializer zu bauen.

  6. Tragen Sie die Akkordeon() Verfahren zum div.

    Verwenden Sie jQuery die div zu identifizieren, die zusammenklappbare Inhalt enthält und anwenden Akkordeon() es:

     Funktion init () {$ ( "# Akkordeon") Akkordeon () -.}

» » » » Wie man das Akkordeon-Widget in AJAX für HTML5 und CSS3 Programmierung verwenden