Wir alle haben den Effekt "Akkordeon" gesehen, der auf vielen Web 2.0-Sites verwendet wird. Viele Akkordeon-Skripte sind jedoch sehr umfangreich, nutzen die Bibliotheken, auf denen sie basieren, nur unzureichend und können nicht mit Dingen wie dem Sicherstellen einer konsistenten Höhe des Akkordeons umgehen. In diesem Tutorial verwenden wir die Bibliotheken Prototype und Scriptaculous, um ein leichtes, intelligentes Akkordeon zu erstellen.
Demo und Quellcode
Schritt 1 - Das Ziel
Unser Ziel ist es, ein leichtes Akkordeon-Skript zu erstellen, das auf den JavaScript-Bibliotheken Prototype und Scriptaculous basiert. Das Akkordeon sollte:
Erlauben Sie eine unbegrenzte Anzahl von Akkordeonscheiben
Vollständig von CSS gestylt werden
Seien Sie unaufdringlich - Benutzer ohne eingeschaltetes Javascript sollten Ihren gesamten Akkordeon-Inhalt sehen
Seien Sie leicht - mit relativ wenigen Codezeilen; Verwenden Sie die Ereignisdelegierung, um den Speicherverbrauch zu begrenzen.
Unterstützt jegliche Art von Inhalten innerhalb des Akkordeons
Stellen Sie sicher, dass die Höhe des Akkordeons konstant bleibt, wenn sich der Inhalt jedes Akkordeonfensters ändert der nervige "Bouncing" -Effekt
Dies ist ein relativ fortgeschrittenes Tutorial, das davon ausgeht, dass der Leser über ausreichende Kenntnisse in den Bereichen Javascript, CSS, HTML und objektorientiert verfügt Programmierung und ein grundlegendes Verständnis der Prototyp- und Scriptaculous-Bibliotheken. Vollständiger Quellcode ist jedoch Es steht Ihnen zum Lernen zur Verfügung und der Code ist sehr einfach zu lesen und zu lernen, wenn Sie nicht mit dem spezifischen Wissen vertraut sind verwendete Bibliotheken.
Bevor wir beginnen, können Sie eine funktionierende Demonstration des Akkordeons sehen.
Schritt 2 - Beginnen Sie mit Basic Markup
Zu Beginn erstellen wir ein einfaches HTML-Markup für unser Akkordeon:
1 umschalten
Inhalt 1
Umschalten 2
Inhalt 2
3 umschalten
Inhalt 3
4 umschalten
Inhalt 4
Schritt 3 - Fügen Sie einen Stil hinzu
Als Nächstes müssen wir unserem Akkordeon Stil verleihen, damit es wie ein Akkordeon wirkt. Zu Beginn machen wir einen ersten Durchgang des grundlegenden Stylings und fügen dann weitere hinzu, wenn alles funktioniert. Es gibt auch einige zusätzliche Styles, die eingeschlossen werden müssen, um sicherzustellen, dass das Akkordeon während der Animation korrekt angezeigt wird.
div # testakkordeon margin: 10px; border: 1px solid #aaa; div.accordion position: relativ; / * zum Binden erforderlich - arbeitet um eine "Besonderheit" in Prototyp * / div.accordion-toggle position: relative; / * für den Effekt erforderlich * / z-index: 10; / * für den Effekt erforderlich * / background: #eee; / * für Effekt erforderlich - kann alles außer "transparent" sein * / Cursor: Zeiger; div.accordion-toggle-active background: #fff; div.accordion-content overflow: ausgeblendet; / * für Effekt erforderlich * / Hintergrund: #aaa;
Sehen Sie sich das grundlegende Akkordeon mit einem einfachen Stylesheet an.
Schritt 4 - Erstellen Sie die Javascript-Akkordeonklasse
Prototype bietet einen wunderbaren Rahmen für das Erstellen von Klassen in Javascript, und wir verwenden diese Funktionalität zum Erstellen unsere Akkordeonklasse. Diese Klasse enthält alle Eigenschaften und Methoden eines Akkordeons: das aktuell angezeigte Bereich, den Inhalt des Akkordeons, Methoden zum Erweitern und Zusammenziehen von Bereichen und Ereignisbehandlungsmethoden, um zu definieren, was passiert Wenn Benutzer eine Aktion ausführen, z. B. Klicken. Fürs Erste werden wir die Grundstruktur der Klasse sowie alle Klassen einrichten Eigenschaften und Methoden, die wir brauchen:
var Accordion = Class.create (initialize: function () this.accordion = null; / * Speichert einen Zeiger auf das Akkordeonelement das Akkordeon * / this.options = null; / * Erlaubt dem Benutzer die Definition der Namen der css-Klassen * / this.maxHeight = 0; / * Speichert die Höhe des höchsten Inhaltsbereichs * / this.current = null; / * Speichert einen Zeiger auf den aktuell erweiterten Inhaltsbereich. * / This.toExpand = null; / * Speichert einen Zeiger auf den Inhaltsbereich, der erweitert werden soll, wenn ein Benutzer auf * / this.isAnimating = false; / * klickt derzeit läuft * /, checkMaxHeight: function () , / * Bestimmt die Höhe des höchsten Inhaltsbereichs * / initialHide: function () , / * Blendet die Bereiche aus, die nicht standardmäßig * / attachInitialMaxHeight: function angezeigt werden () , / * Stellt sicher, dass die Höhe des ersten Inhaltsbereichs mit dem höchsten Wert * / expand: function (el) , / * übereinstimmt ents * / animate: function () , / * Führt die eigentliche Animation des Akkordeoneffekts durch * / handleClick: function (e) / * Bestimmt, wo ein Benutzer geklickt hat, und handelt basierend auf diesem Klick * /. );
Dies sind die grundlegenden Methoden und Eigenschaften, die wir benötigen, um unser Akkordeon zu bauen. Jeder der nächsten Schritte wird führe dich durch den Aufbau jeder Methode, bis wir ein funktionierendes Akkordeon haben. Wenn Sie irgendwann während des Tutorials brauchen Sie können sich einen kurzen Überblick über die jeweiligen Methoden oder Eigenschaften verschaffen und können diesen stark kommentierten Code als Referenz verwenden.
Schritt 5 - Initialisieren: Erste Schritte
Prototypenklassen haben eine spezielle Methode namens initalize (), die ein Konstruktor ist. Das heißt, es handelt sich um den Benutzer erstellt ein neues Instanzobjekt dieser Klasse. Für jedes Akkordeon müssen wir zwei Dinge wissen, bevor wir beginnen:
Die ID des Akkordeonelements.
Die voreingestellte Startposition des Akkordeons (falls etwas anderes als die erste Position)
Daher müssen wir unserem Konstruktor erlauben, diese beiden Parameter zu akzeptieren. Zusätzlich muss unser Konstruktor:
Rufen Sie das Akkordeon und seinen Inhalt als Zeiger auf diese Elemente ab und speichern Sie sie
Legen Sie die benutzerdefinierten Optionen fest
Legt das aktuelle erweiterte Element fest
Bestimmen Sie die maximale Höhe, die wir als Höhe für alle Inhaltsbereiche verwenden, und wenden Sie diese an
Blenden Sie die Inhaltsbereiche aus, die standardmäßig nicht angezeigt werden
Fügen Sie dem Akkordeon einen Ereignis-Listener hinzu, um die Klicks der Benutzer zu sehen.
Hier ist der Code für unsere initialize () -Methode:
initialize: function (id, defaultExpandedCount) if (! $ (id)) throw ("Versuch, Akkordeon mit id zu initialisieren:" + id + "wurde nicht gefunden."); this.accordion = $ (id); this.options = toggleClass: "Akkordeonumschaltung", toggleActive: "Akkordeonumschaltung aktiv", contentClass: "Akkordeoninhalt" this.contents = this.accordion.select ('div.' + this.options. contentClass); this.isAnimating = false; this.maxHeight = 0; this.current = defaultExpandedCount? this.contents [defaultExpandedCount-1]: this.contents [0]; this.toExpand = null; this.checkMaxHeight (); this.initialHide (); this.attachInitialMaxHeight (); var clickHandler = this.clickHandler.bindAsEventListener (this); this.accordion.observe ('click', clickHandler);
Wie Sie sehen, haben wir alle unsere Eigenschaften auf vernünftige Standardwerte gesetzt und 3 Methoden genannt, um die Dinge zu optimieren oben. Schließlich haben wir den Event-Handler an das Akkordeon angehängt. Erstellen wir diese drei Methoden und den Ereignishandler.
Schritt 6 - Überprüfen des höchsten Elements
Eine der Anforderungen an unser Akkordeon ist, dass es so skaliert werden muss, dass der größte Inhaltsbereich erweitert wird, Die Gesamthöhe des Akkordeons bleibt konstant. Um dieses Ziel zu erreichen, werden wir die Inhaltsbereiche durchlaufen Bestimmen, welche die höchste ist, und legen Sie die maxHeight-Eigenschaft entsprechend fest:
checkMaxHeight: function () für (var i = 0; i this.maxHeight) this.maxHeight = this.contents [i] .getHeight ();
Schritt 7 - Rest verstecken
Unser Akkordeon sollte nur den als aktuellen Bereich angegebenen Inhaltsbereich anzeigen. Alle anderen sollten versteckt sein standardmäßig. Außerdem müssen wir das Höhenattribut dieses Inhaltsbereichs auf 0 setzen. Dies verhindert, dass der Inhaltsbereich angezeigt wird erscheint vor der korrekten Animation kurz ausgeblendet.
initialHide: function () for (var i = 0; i
Schritt 8 - Zeigen Sie den Standard-Inhaltsbereich an
Nachdem wir alles außer dem Standardinhaltsbereich ausgeblendet haben, müssen wir sicherstellen, dass der Standardinhaltsbereich korrekt angezeigt wird. In der Überschrift sollte der "aktive" Stil angewendet werden, und die Höhe sollte mit der maxHeight-Eigenschaft übereinstimmen:
attachInitialMaxHeight: function () this.current.previous ('div.' + this.options.toggleClass) .addClassName (this.options.toggleActive); if (this.current.getHeight ()! = this.maxHeight) this.current.setStyle (height: this.maxHeight + "px");
Schritt 9 - Erstellen Sie den Event-Handler
Wenn Sie aus einem traditionellen Hintergrund für die Ereignisbehandlung kommen, in dem wir den Ereignis-Handler an jeden Bereich anhängen, den Sie anklickbar machen möchten, Es kann verwirrend erscheinen, dass wir den Handler nur an einem Element befestigen. Wir benutzen Veranstaltung Delegation. Für diejenigen von Ihnen, die mit dem Thema nicht vertraut sind, habe ich eine Kurzbeschreibung geschrieben Überblick über die Veranstaltungsdelegation welche wird Sie in das Konzept einführen und warum es so wichtig ist. Das heißt, wir brauchen einen intelligenten Event-Handler:
clickHandler: function (e) var el = e.element (); if (el.hasClassName (this.options.toggleClass) &&! this.isAnimating) this.expand (el);
Diese Funktion besteht aus zwei Teilen. Zuerst legen wir fest, was angeklickt wurde. Dann prüfen wir, ob es sich um eine Überschrift, die angeklickt wurde und derzeit keine Animation läuft. Wenn dies der Fall ist, rufen wir die expand () -Methode auf um den Prozess des Akkordeons zu beginnen. Die Variable, die wir an die expand () -Methode übergeben, ist die Überschrift, auf die der Benutzer geklickt hat.
Schritt 10 - Starten Sie den Prozess
Jetzt können wir mit dem Akkordeoneffekt beginnen. Wir wissen, dass die expand () -Methode einen Parameter für die Element, auf das geklickt wurde. Mit diesem Parameter bestimmt die Expand-Methode, welcher Inhaltsbereich erweitert werden soll und ob dies der Fall ist ist nicht bereits erweitert, ruft die animate () -Methode dazu auf, "ihre Magie zu tun!"
expand: function (el) this.toExpand = el.next ('div.' + this.options.contentClass); if (this.current! = this.toExpand) this.toExpand.show (); this.animate (); ,
Schritt 11 - "Dirty Work" machen
Zu diesem Zeitpunkt sind alle Teile vorhanden. Wir wissen, welcher Inhaltsbereich gerade angezeigt wird, wir wissen, welche Überschrift Der Benutzer hat angeklickt, und wir wissen, welchen Inhaltsbereich der Benutzer angefordert hat, angezeigt zu werden. Nun müssen wir das Akkordeon schaffen Animation. Dafür erstellen wir eine animate () -Methode, die die Scriptaculous Effect.Parallel-Klasse zum Rendern verwendet die zwei Animationen zusammen; und die Effect.Scale-Klasse, um die Größe jedes Inhaltsbereichs zu ändern. Die animierte Methode wird Führen Sie diese Schritte aus:
Erstellen Sie ein Array, in dem unsere Effect.Scale-Objekte gespeichert werden
Sammeln Sie die Parameter, die an den Effect.Scale-Konstruktor für den Inhaltsbereich übergeben werden, der angezeigt und erstellt werden soll das Objekt
Fügen Sie dieses Objekt unserem Array hinzu
Sammeln Sie die Parameter, die an den Effect.Scale-Konstruktor für den Inhaltsbereich übergeben werden, der ausgeblendet und erstellt wird das Objekt
Fügen Sie dieses Objekt unserem Array hinzu
Erstellen Sie das Effect.Parallel-Objekt, mit dem unsere Effect.Scale-Objekte ausgeführt werden, ist die Synchronisierung.
Sagen Sie unserem Akkordeon-Objekt, dass wir animieren
Führen Sie die Animationen aus
Säubern Sie alle zurückgelassenen Stile
Sagen Sie unserem Akkordeon-Objekt, dass wir mit der Animation fertig sind
Für eine vollständige Erläuterung der Optionsparameter übergeben wir sowohl die Effect.Scale- als auch die Effect.Parallel-Objekte, Bitte lesen Sie die Scriptaculous-Dokumentation. Die wichtigsten Aspekte der Methode sind die beforeStart- und afterFinish-Methoden in unserem Effect.Parallel. Der vorStart Methode sagt dem Akkordeon, dass es gerade animiert. Dadurch wird verhindert, dass der Event-Handler startet alle weiteren Änderungen, solange die Animation läuft. Es stellt auch sicher, dass die angeklickte Überschrift ist den "aktiven" Klassennamen gegeben. Die afterFinish-Methode blendet den zuvor angezeigten Inhaltsbereich vollständig aus (nachdem es aufgrund der Animation verschwunden ist). Dadurch wird auch die endgültige Höhe des neu angezeigten Inhalts sichergestellt Bereich ist richtig. Nachdem der Swap nun abgeschlossen ist, teilt er unserem Akkordeon mit, dass der aktuell erweiterte Inhaltsbereich der ist eine haben wir neu erweitert und die Animation ist abgeschlossen.
Schritt 12 - Hinzufügen eines weiteren Stils
An diesem Punkt haben wir ein anständig aussehendes Akkordeon, das Sie hier in Aktion sehen können. Aber mit ein wenig CSS können wir alles viel spektakulärer aussehen lassen. Zuerst erstellen wir ein schnelles Photoshop-Modell, sodass wir eine ungefähre Vorstellung davon haben, wie alles aussehen sollte. In diesem Sinne brauchen wir drei Bilder:
Share
Accentsconagua
und 
