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.

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

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:

 
Akkordeon-Demo
Buch I - Erstellen der HTML-Stiftung
Ton HTML Foundations
Es ist ganz über Validation
Wählen Sie Ihre Werkzeuge
Verwalten von Informationen mit Listen und Tabellen
 
Anschließen von Geräten in Verbindung mit Links
Hinzufügen von Bildern
Erstellen von Formularen
Buch II - Styling mit CSS
Coloring Your World
Styling Text
Selektoren, Klasse und Stil
Rahmen und Hintergrund
Levels von CSS
Buch III - Verwenden von Positional CSS-Layout für
Spaß mit dem Fabulous Float
 
Gebäude Floating-Seitenlayouts
Styling Listen und Menüs
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 () -.}