jQuery Accordion/Tab durch BBCode

In den letzten Wochen habe ich beim Erstellen neuer Beiträge für mein Militia-Caelestis v2 Projekt immer wieder festgestellt, dass ich nicht nur in den Modulbereichen auf jQuery zurückgreifen möchte (dort geregelt über die Templates), sondern vielmehr dynamisch jQuery-Elemente an beliebiger Stelle einsetzen mag.
Im Zuge dieser Überlegung habe ich meinen BBCode-Parser erweitert, sodass ich in einer ersten Version Accordions dynamisch erzeugen konnte. Auf der Suche nach Optimierungsmöglichkeiten bin ich auf die sensationelle PHP-Funktion preg_replace_callback gestoßen. Mit deren Hilfe konnte ich den regulären Ausdruck für den Accordion-Tag vereinfachen und es sogar ermöglichen, dass Accordions beliebig geschachtelt werden können.

Ein weiterer Vorteil war, dass ich den erzeugten Quellcode mit geringfügigen Modifikationen auch zur Erzeugung von jQuery-Tabs verwenden konnte. Und der absolute Knüller ist, dass sich diese ebenfalls beliebig schachteln lassen. Auch in Kombination mit Accordions. Während ich diesen Artikel verfasst hatte, wollte ich noch ein extremes Beispiel kreiieren, welches die Möglichkeiten etwas überspitzt demonstriert. Und wie man es so kennt: Vorführeffekt, die Verschachtelung hat nicht ganz geklappt.
Schuld war der reguläre Ausdruck, der im normalen Greedy-Verhalten die sequentiellen Elemente alle zu einem zusammengefasst hätte oder im Ungreedy-Verhalten die verschachtelten zerstört hat, da das innerste schließende Tag zum äußersten öffnenden gezählt wurde. Beides nicht hinnehmbar.

Nach dem kurzen Schreck habe ich meine Kenntnisse über reguläre Ausdrücke erweitern können. Der Clou an der Sache: Lookaheads, hier konkret ein negativer Lookahead. Dieser sorgt dafür, dass ein öffnender Tag nur dann mit einem schließenden kombiniert wird, wenn zwischen dem öffnenden und schließenden Tag kein weiterer öffnender Tag derselben Art kommt. Die ganze Kiste wird also von innen nach außen aufgelöst. Das Ganze dann in eine Schleife gepackt, die prüft, ob es noch weitere mögliche Paarungen gibt und diese durchführt.

Herausgekommen ist dieses extreme Beispiel, welches sowohl die Verschachtelungen als auch die Sequenzierung zeigt:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert