Drupal e jQuery. Lezione 1. Collegare un file con jQuery.

jQuery è uno strumento molto comodo quando serve nascondere, modificare, spostare, adattare graficamente o animare un elemento. È estremamente pratico e semplice da usare. Colleghiamo quindi un file JavaScript. I file si collegano al tema tramite il file con estensione .info presente nella tua tema. Per collegare un file, aggiungi nel file del tema la seguente riga:

scripts[] = js/custom.js

dove js/custom.js è il percorso del file JavaScript all’interno del tuo tema.

Successivamente, dobbiamo assicurare che il codice jQuery venga eseguito dopo il caricamento completo della pagina. In Drupal 6 è sufficiente scrivere:

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

In Drupal 7, invece, jQuery funziona in modalità noConflict, il che permette di usare anche altre librerie come MooTools. Per questo motivo, in Drupal 7 il codice jQuery si scrive così:

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

Ma il modo migliore è utilizzare i behavior di Drupal:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Qui scrivi il tuo codice JavaScript
    }
  };
})(jQuery);

Per maggiori dettagli sui behavior, leggi questo articolo:

8.8. Lavorare con JavaScript/jQuery in Drupal 8. Cosa sono i behavior?