Utiliser jQuery avec Drupal 7

Pour utiliser jQuery avec Drupal, rien de plus facile. Tout d'abord, nul besoin d'installer jQuery : celui-ci est livré avec le cœur de Drupal. Ne vous reste qu'à créer et déclarer un fichier Javascript, par exemple script.js. L'avantage, c'est que Drupal 6 reconnaît automatiquement n'importe quel fichier script.js placé à la racine de votre dossier de thème. Mais, dans Drupal 7, premier changement, ce fichier doit être déclaré dans le fichier .info de votre thème, sans quoi il ne sera jamais pris en compte. En outre, second changement (le plus important), la gestion du Javascript ayant changé dans Drupal 7, vous devez présenter votre fichier script.js d'une manière particulière.

Voici, ci-dessous, le bon code à présenter dans votre fichier script.js, en deux versions, l'une pour Drupal 6, l'autre pour Drupal 7. Vous verrez vous-même la différence.

Avant, avec Drupal 6

// [jQuery BEGIN] début des fonctions
$(document).ready(function() {
// ****************************************************************
/* votre code jQuery ici !! */
// ****************************************************************
// [jQuery END] fin des fonctions
});

Maintenant, avec Drupal 7

// jQuery for Drupal 7 [BEGIN]
(function ($) {
// [jQuery BEGIN] début des fonctions
$(document).ready(function() {
// ****************************************************************
/* votre code jQuery ici !! */
// ****************************************************************
// [jQuery END] fin des fonctions
});
// jQuery for Drupal 7 [END]
}(jQuery));

Et voilà ! Enjoy !

Comments

Bonjour,
J'utilise un site sous drupal 7. Je souhaiterai mettre un fade in/out effect sur mes pages et les liens.

J'ai utilisé votre code et j'ai créé un script.js.

Ensuite je déclare le script.js dans le .info de mon thème:
scripts[] = script.js

Pour la partie Jquery je ne sais pas quoi faire. Quel code faut il mettre ?

J'ai pu voir ce tutoriel http://www.onextrapixel.com/2010/02/...e-transitions/

Malheureusement ça ne marche pas, j'ai essayé de copier le code Jquery qu'ils proposent mais sans résulats.

Merci pour votre aide.

Bonne journée

Merci pour l'info car j'étais à 2 doigts de m'arracher les cheveux.

Précision : la recommandation drupal est d'utiliser les behaviors javascript de la façon suivante:
Drupal.behaviors.monIdUnique = function(context){
//jquery code here
}
du moins pour drupal 6...
Pour drupal 7 cela donne
(function ($) {

Drupal.behaviors.exampleModule = {
attach: function (context, settings) {
//jquery code here
}
};

})(jQuery);

Merci pour l'info !!
Mais par contre, chez moi, pas d'interprétation du script. Drupal 7 ne charge pas de jquery... J'ai tout essayé !

Je fais un petit compte à rebourd en jquery. J'ai mon script.js. Dans mon .info de mon thème j'ai scripts[]=script.js
et dans le doute j'ai lier mon script.js à mon html.tpl.php.
Après j'ai fait ce que tu disais :

// jQuery for Drupal 7 [BEGIN]
(function ($) {
// [jQuery BEGIN] début des fonctions
$(document).ready(function() {
// ****************************************************************
/* votre code jQuery ici !! */
// ****************************************************************
jQuery(function($){
var launch = new Date(2012,07,31,12,00,00);

setDate();
function setDate(){
var now = new Date();
var s = (launch.getTime()-now.getTime())/1000;
var d = Math.floor(s/86400);
$('#days') .html(''+d+'');

}

});

// [jQuery END] fin des fonctions
});
// jQuery for Drupal 7 [END]
}(jQuery));

Mais dans le div où je souhaite afficher le nombre de jours, rien de dynamique... Simplement un +d+... ce qui m'amène à penser qu'il faut tout de même lier ton script.js à ta page de ton tpl. Pour moi, j'imagine sur front-page.php ?
Je vais tester mais si vous avez une solution, je suis preneur... ;) Merci quand même !!

Merci pour l'info !!
Mais par contre, chez moi, pas d'interprétation du script. Drupal 7 ne charge pas de jquery... J'ai tout essayé !

Je fais un petit compte à rebourd en jquery. J'ai mon script.js. Dans mon .info de mon thème j'ai scripts[]=script.js
et dans le doute j'ai lier mon script.js à mon html.tpl.php.
Après j'ai fait ce que tu disais :

// jQuery for Drupal 7 [BEGIN]
(function ($) {
// [jQuery BEGIN] début des fonctions
$(document).ready(function() {
// ****************************************************************
/* votre code jQuery ici !! */
// ****************************************************************
jQuery(function($){
var launch = new Date(2012,07,31,12,00,00);

setDate();
function setDate(){
var now = new Date();
var s = (launch.getTime()-now.getTime())/1000;
var d = Math.floor(s/86400);
$('#days') .html(''+d+'');

}

});

// [jQuery END] fin des fonctions
});
// jQuery for Drupal 7 [END]
}(jQuery));

Mais dans le div où je souhaite afficher le nombre de jours, rien de dynamique... Simplement un +d+... ce qui m'amène à penser qu'il faut tout de même lier ton script.js à ta page de ton tpl. Pour moi, j'imagine sur front-page.php ?
Je vais tester mais si vous avez une solution, je suis preneur... ;) Merci quand même !!

Lektum's picture
Lektum