Drupal 7 und Ajax-Menü

Herausforderung


Sind Sie auf ein solches Problem gestoßen, wenn Sie ein einfaches Ajax-Menü auf einer einfach zu bedienenden Website (Drupal 7) erstellen müssen? Sie haben ein Blog, Sie haben es schnell aus den Modulen zusammengestellt, aber hier haben Sie das Ajax-Menü. Und hier schaffen wir ein benutzerdefiniertes Modul, wie diese , bindet an dem Links - Menü Ereignishandler, Ajax-Anforderung senden auf der Seite der Antwort - Server bilden und wieder manuell den Empfang dieser Antwort verarbeiten. Oder wir verwenden das wunderbare Modul von Genosse Nick Denry, dieses , aber hier schreibt der Autor im letzten Kommentar: „Derzeit unterstützt das Modul nur den Typ Basic Page, das Modul ist in seiner Anwendung beschränkt. Es gibt Pläne, das Modul fertigzustellen, aber bisher ist leider keine Zeit für deren Implementierung. “

Ist es möglich, ein solches Modul auf Drupal 7 zu erstellen, mit dem es möglich wäre, das übliche Ajax-Menü durch Schreiben eines Minimums an Code zu konfigurieren?

  • Angenommen, dieses Modul sollte universell für verschiedene Themen und für verschiedene Menüpositionen sein. Angenommen, alle CSS-Menü-Link-Selektoren, die von unserem Modul verarbeitet werden sollen, sind in den Moduleinstellungen angegeben.
  • Angenommen, die Struktur der Seiten von Sites ist ebenfalls unterschiedlich. Blogs sind anders. Einige Ajax-Menüs laden den Inhalt neu und lassen beispielsweise die rechte Spalte unberührt. Andere Ajax-Menüs aktualisieren ebenfalls die Spalte zusammen mit dem Inhalt. Es gibt auch viele Optionen, aber lassen Sie es eine zweite solche Einstellung in unserem Modul geben - Bereiche, die von Ajax neu geladen wurden.
  • Vergessen Sie auch nicht, dass auf einigen Seiten das Ajax-Menü einen Neustart durch den Browser nachahmt, auf anderen nicht. Irgendwo wird die Adressleiste aktualisiert, irgendwo wird sie nicht aktualisiert. In Gegenwart der ersten beiden Einstellungen wird es nicht schwierig sein, diese beiden Einstellungen zu unserem Modul hinzuzufügen.


Lösung


Ich präsentiere Ihnen das Ajax Regions Modul .
Alle Moduleinstellungen werden auf einer Modulkonfigurationsseite gesammelt (admin / config / system / ajax_regions):
Seite mit den Einstellungen für das Ajax Regions-Modul

Wenn Sie den zweiten Punkt oben lesen, haben Sie sich vielleicht gefragt, in welcher Form der Bereich "Ajax reloaded" in den Moduleinstellungen angezeigt wird. Im Ajax Regions-Modul müssen Sie eine Reihe von Namen für Drupal-Regionen und deren CSS-Selektoren (Selektoren unterscheiden sich natürlich auch für dieselben Regionen auf verschiedenen Sites) in Form eines JSON-Objekts angeben : {"region name1": " selector1 ”,“ name of region2 ”:“ selector2 ”...}. Jede Region wird bei der Verarbeitung einer Ajax-Anfrage in einen eigenen Selektor gestellt. Auf diese Weise können wir festlegen, was mit den Spalten geschehen soll, ob es sich lohnt, sie mit dem Inhalt zu aktualisieren oder nicht! Wenn dies der Fall ist, sollten die Bereiche der Spalten zusammen mit dem Bereich des Inhalts in diesem JSON-Objekt platziert werden.

Für ein Ajax-Menü genügt in der Regel eine Zeile in der Einstelltabelle dieses Moduls. Wenn Sie jedoch über mehrere Ajax-Menüs verfügen oder interne Links im Inhalt auf ähnliche Weise behandeln möchten oder sich innerhalb desselben Ajax-Menüs unterschiedliche Links grundsätzlich unterschiedlich verhalten sollten, können Sie mehrere Zeilen erstellen.

Wie im dritten Absatz versprochen, gibt es einige zusätzliche Einstellungen, die sich häufig in verschiedenen Ajax-Menüs unterscheiden:

SET LOADING-INDICATOR - Nachahmung eines Seiten-Reload-Indikators durch den Browser
Die UPDATE - Dokument , um die TITEL - Update Titelseite
der UPDATE die CURRENT die ADDRESS - Adressleiste des Update - Browser
das UPDATE die ACTIVE die LINKS - Installation eines aktiven Link zur Klasse der «aktiven» (nützlich für Standard - Themen Bartik)

Und auch js-Funktionen vor und nach Ajax-Boot, für alle Fälle .
Default:
Drupal.ajax_regions.before = function(link) {
  //
}

Drupal.ajax_regions.after = function(link, response) {
  jQuery('#page-title').html(response.node_title);
  jQuery(".tabs").html('');
}

Jetzt auch beliebt: