Drupal und jQuery. Lektion 1. Einbinden einer Datei mit jQuery.

jQuery ist ein sehr praktisches Werkzeug, wenn man etwas ausblenden, ändern, verschieben, schön einfügen und wieder verschwinden lassen möchte. Sehr, sehr praktisch und sehr einfach. Lassen Sie uns eine JavaScript-Datei einbinden. Dateien binden wir im Theme über die .info-Datei Ihres Themes ein. Fügen Sie in die .info-Datei Ihres Themes folgende Zeile ein:

scripts[] = js/custom.js

Hier ist js/custom.js der Pfad zur JavaScript-Datei in Ihrem Theme.

Um jQuery-Code nach dem Laden der Seite auszuführen, reicht in Drupal 6 folgender Code:

$(document).ready(function(){
  //jQuery code
});

In Drupal 7 läuft jQuery im noConflict-Modus, was die gleichzeitige Nutzung von Mootools erlaubt. Deshalb binden wir jQuery in Drupal 7 so ein:

(function($){
  $(document).ready(function(){
    //jQuery code
  });
})(jQuery);

Am besten verwendet man jedoch Behaviors:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Hier schreiben wir unseren JavaScript-Code
    }
  };
})(jQuery);

Mehr über Behaviors lesen Sie in diesem Artikel:

8.8. Arbeit mit JavaScript/jQuery in Drupal 8. Was sind Behaviors?