Drupal en jQuery. Les 1. Een jQuery-bestand koppelen.

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

Extra Block Types (EBT) - gestileerde, aanpasbare bloktypes: Slideshows, Tabs, Cards, Accordions en vele andere. Ingebouwde instellingen voor achtergrond, DOM Box, javascript-plugins. Ervaar vandaag al de toekomst van layout building.

Demo EBT-modules Download EBT-modules

10/10/2025, by Ivan

jQuery is een erg handig hulpmiddel wanneer je iets wilt verbergen, wijzigen, verplaatsen, mooi opmaken of laten verdwijnen. Zeer gebruiksvriendelijk en eenvoudig. Laten we een JavaScript-bestand koppelen. We voegen JavaScript-bestanden aan een thema toe via het .info-bestand van je thema. Om een bestand te koppelen, voeg je de volgende regel toe aan het .info-bestand van je thema:

scripts[] = js/custom.js

waarbij js/custom.js het pad is naar het JavaScript-bestand binnen je thema.

Vervolgens moeten we ervoor zorgen dat de jQuery-code pas wordt uitgevoerd nadat de pagina volledig is geladen. Voor Drupal 6 is het volgende voldoende:

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

Maar in Drupal 7 werkt jQuery in de noConflict-modus, wat het mogelijk maakt om naast jQuery ook bijvoorbeeld Mootools te gebruiken. Daarom schrijven we jQuery-code in Drupal 7 als volgt:

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

Maar het is nog beter om behaviors te gebruiken:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Hier schrijven we onze eigen JavaScript-code
    }
  };
})(jQuery);

Lees meer over behaviors in dit artikel:

8.8. Werken met JavaScript/jQuery in Drupal 8. Wat zijn behaviors?

Extra Block Types (EBT) - Nieuwe Layout Builder ervaring❗

❗Extra Paragraph Types (EPT) - Nieuwe Paragraphs ervaring

Drupal en jQuery. Les 1. Een jQuery-bestand koppelen.