Genau So erstellen Sie ein benutzerdefiniertes jQuery-Akkordeon

Es scheint, dass wir zusätzliche CSS für IE6 hinzufügen müssen, um den Whitespace-Fehler zu berücksichtigen:

ul # Akkordeon float: left; Breite: 300px;  ul # Akkordeon li float: left; Breite: 298px;  ul # Akkordeon a.heading width: 298px;  ul # Akkordeon ul li Float: keine; Breite: Auto; 

Das jQuery UI-Akkordeon

Dann müssen wir das Akkordeon auf unserer ungeordneten Liste mit einer ID des Akkordeons initialisieren:

Und da haben Sie es, ein funktionierendes Akkordeon.

Um das aktuell geöffnete Akkordeon-Element mehr hervorzuheben, habe ich ein paar zusätzliche CSS hinzugefügt:

ul # Akkordeon li.ui-akkordeon-ausgewählt a.heading background: # 025185; Farbe: #fff; 

Der Klassenname von ui-Akkordeon ausgewählt wird automatisch zum aktuellen Akkordeonbereich hinzugefügt.

Unser Custom jQuery Akkordeon

Nachdem wir nun das jQuery UI-Akkordeon erstellt haben, ist es an der Zeit, unser eigenes zu erstellen. Was mir an der jQuery UI-Version nicht unbedingt gefällt, ist die Art und Weise, wie sie angezeigt wird, wenn JavaScript deaktiviert ist. Ich würde es vorziehen, es so zu haben, dass jeweils nur ein Abschnitt geöffnet ist.

Um dies zu erreichen, füge ich noch ein wenig PHP hinzu. Sie können dies auch mit jeder Programmiersprache problemlos erreichen.

Die Idee dahinter ist, dass wir eine Variable in der URL übergeben, und wenn die Variable mit jedem Abschnitt übereinstimmt, weisen wir eine Klasse von zu aktuell zu diesem Abschnitt. Es ist viel einfacher, dies im Code zu sehen, also schauen Sie sich das an:

 
 > Letzte Einträge 
 
19.01.2009 Titel des letzten Eintrags
 
15.01.2009 Titel des letzten Eintrags
 
13.01.2009 Titel des letzten Eintrags
 
01.11.2009 Titel des letzten Eintrags
 
01.10.2009 Titel des letzten Eintrags
 
  > Beliebte Einträge 
 
16.08.2008 Populärer Eintragstitel
 
06.12.2008 Populärer Eintragstitel
 
04.12.2008 Populärer Eintragstitel
 
06.12.2007 Populärer Eintragstitel
 
03.12.2007 Populärer Eintragstitel
 
  > Kategorien 
 
Kategoriename 7
 
Kategoriename 4
 
Kategoriename fünfzehn
 
Kategoriename 29
 
Kategoriename 8
 
  > Archiv 
 
Januar 2009 4
 
Dezember 2008 14
 
November 2008 12
 
Oktober 2008 8
 
September 2008 18
 
  

Sie sollten auch bemerken, dass ich die URL aller Links geändert habe, indem Sie die Akkordeonabschnitte umschalten, um sie mit der if -Anweisung für den Abschnitt abzugleichen. Wenn also JavaScript deaktiviert ist, werden Sie zu einer neuen Seite mit geöffnetem Abschnitt weitergeleitet.

Wir müssen auch das jQuery-UI-Akkordeon-Skript entfernen und unser eigenes hinzufügen:

Zusätzliches CSS

Mit dieser geringfügigen Änderung des Markups müssen wir noch ein wenig CSS hinzufügen. Wir haben nicht mehr die ui-Akkordeon ausgewählt Klasse, die den Listenelementen zugewiesen wird; Es ist jetzt eine Klasse von aktuell. Wir müssen auch die Änderung des Klassennamens im Zustand on für das Akkordeon berücksichtigen:

ul # Akkordeon li.current a.heading background: # 025185; Farbe: #fff; 

Wir wollen also alle ungeordneten Listen ausblenden, es sei denn, sie sind Nachkomme des Listenelements mit der Klasse aktuell. Ich habe dieser Demo-Seite auch eine Body-ID hinzugefügt, damit wir für beide Beispiele dasselbe Stylesheet verwenden können.

body # customAccordion ul # Akkordeon li ul display: none;  body # customAccordion ul # Akkordeon li.current ul display: block; 

Das benutzerdefinierte JavaScript

Zuerst wollen wir das Skript ausführen, sobald das Dokument geladen ist. Wir beginnen also damit:

$ (document) .ready (function () );

Wir möchten, dass das Akkordeon funktioniert, wenn auf die Überschriftenlinks geklickt wird. Wir möchten jedoch die Seite nicht verlassen, deshalb müssen wir sicherstellen, dass und falsch zurückgeben:

$ (Dokument) .ready (Funktion ()  $ ('ul # accordion a.heading'). click (function () return false;); );

Als nächstes mag ich die Umrisse, die um die Links herum erscheinen, wenn sie angeklickt werden, nicht, deshalb setze ich diese auf "none":

$ (document) .ready (function () $ ('ul # accordion a.heading'). click (function ()  $ (this) .css ('Gliederung', 'keine'); falsch zurückgeben; ); );

Es gibt zwei verschiedene Fälle für dieses Skript.

1. Der angeklickte Link ist der bereits geöffnete Abschnitt.
2. Der angeklickte Link lautet nicht der bereits geöffnete Abschnitt.

Der erste Fall

Dies ist keine Funktionalität der jQuery-UI-Version, aber ich denke, ein Benutzer sollte in der Lage sein, alle Abschnitte zu schließen, wenn er möchte. Wenn der angeklickte Link über eine übergeordnete Klasse verfügt, die über eine aktuelle Klasse verfügt, möchten wir die ungeordnete Liste nach oben verschieben und die aktuelle Klasse entfernen.

$ (document) .ready (function () $ ('ul # accordion a.heading'). click (function () $ (this) .css ('Gliederung', 'keine'); if ($ (this) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent ().) removeClass ('current'););  falsch zurückgeben; ); );

Eine andere Sache, die mich an der jQuery-UI-Version stört, ist, dass Sie das Akkordeon so scrollen können, dass es fast aus dem Blickfeld ist, klicken Sie darauf, und dann passiert die Interaktion über dem, was Sie sehen können. Scrollen Sie im Beispiel der jQuery-Benutzeroberfläche nach unten und probieren Sie es aus.

Meine Lösung ist also, dieses wunderbare kleine Skript namens jQuery ScrollTo zu verwenden. Es ist ein sehr kleines Skript, das ein reibungsloses Blättern der Seiten ermöglicht.

Fügen wir das dem Kopf des Dokuments vor unserem Akkordeon-Skript hinzu:

Wenn der Abschnitt nach oben scrollt, möchte ich das Fenster an den Anfang des Akkordeons rollen:

$ (document) .ready (function () $ ('ul # Akkordeon a.heading'). click (function () $ (this) .css ('outline', 'none'); wenn ($ (this.) ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current') ); $ .scrollTo ('# Akkordeon', 1000); );  falsch zurückgeben; ); );

Der erste Parameter der Funktion ist das Ziel, zu dem geblättert werden soll, und der zweite ist die Zeit, die es benötigen sollte.

Der zweite Fall

Dieser Fall tritt auf, wenn der angeklickte Abschnitt derzeit nicht geöffnet ist. Das erste, was wir tun wollen, ist, den aktuell geöffneten Abschnitt auszublenden und die Klasse von Strom zu entfernen (dieser Teil des Codes ist dem ersten Fall sehr ähnlich):

$ (document) .ready (function () $ ('ul # Akkordeon a.heading'). click (function () $ (this) .css ('outline', 'none'); wenn ($ (this.) ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current') ); $ .scrollTo ('# Akkordeon', 1000);); else  $ ('ul # Akkordeon li.current ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current'););  falsch zurückgeben; ); );

Als Nächstes möchten wir den Abschnitt öffnen, auf den wir geklickt haben, und die Stromklasse hinzufügen:

$ (document) .ready (function () $ ('ul # Akkordeon a.heading'). click (function () $ (this) .css ('outline', 'none'); wenn ($ (this.) ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current') $; scrollTo ('# Akkordeon', 1000);); else $ ('ul # Akkordeon li.current ul'). slideUp ('slow', function () $ (this) .parent ( ) .removeClass ('current');); $ (this) .siblings ('ul'). slideToggle ('slow', function () $ (this) .parent (). toggleClass ('current'););  falsch zurückgeben; ); );

Zum Schluss scrollen wir das Fenster ganz nach oben, genau wie im ersten Fall:

$ (document) .ready (function () $ ('ul # Akkordeon a.heading'). click (function () $ (this) .css ('outline', 'none'); wenn ($ (this.) ) .parent (). hasClass ('current')) $ (this) .siblings ('ul'). slideUp ('slow', function () $ (this) .parent (). removeClass ('current') $; scrollTo ('# Akkordeon', 1000);); else $ ('ul # Akkordeon li.current ul'). slideUp ('slow', function () $ (this) .parent ( ) .removeClass ('current');); $ (this) .siblings ('ul'). slideToggle ('slow', function () $ (this) .parent (). toggleClass ('current'); ); $ .scrollTo ('# Akkordeon', 1000);  falsch zurückgeben; ); );

Das ist es. Ernst. Haben Sie gedacht, ein Akkordeon zu bauen, könnte so einfach sein?

Fazit

Vergleichen wir nun die JavaScript-Dateigrößen mithilfe der Registerkarte "Net" in Firebug.

Im Beispiel der jQuery-Benutzeroberfläche befinden sich die JavaScript-Dateien insgesamt in etwa 73 kb. In unserem benutzerdefinierten Beispiel werden durch das zusätzliche Scrollen des Fensters die JavaScript-Dateien insgesamt ungefähr 57 kb. Nun, das scheint nicht viel zu sein, aber stellen Sie sich vor, Sie haben eine sehr stark frequentierte Site. Das könnte viele Bytes einsparen. Außerdem verstehen Sie jetzt mehr über jQuery.

Jetzt geh raus und schreibe deine eigene jQuery.