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
Romain (not verified)
2011, September 15 - 19:07
Permalink
Fade in pages drupal 7
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
selinav (not verified)
2011, October 25 - 12:13
Permalink
Merci
Merci pour l'info car j'étais à 2 doigts de m'arracher les cheveux.
sofa jokes (not verified)
2013, June 5 - 00:37
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Great blog here! Also your site loads up fast! What web host are
you using? Can I get your affiliate link to your host?
I wish my website loaded up as fast as yours lolVisit my website article at
<a href="http://www.spejderwiki.dk/index.php/Index.php">sofa jokes</a>
ubezpieczenia ... (not verified)
2013, June 5 - 00:38
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Whats up are using Wordpress for your blog platform?
I'm new to the blog world but I'm trying to get started and set
up my own. Do you need any html coding knowledge to make your own blog?
Any help would be greatly appreciated!Visit my website at <a href="http://manydoorsopen.akki.fr/index.php?do=/profile-45/info/">ubezpieczenia turystyczne warta opinie</a>
bike worx (not verified)
2013, June 5 - 01:35
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Woah! I'm really digging the template/theme of this site. It's simple, yet effective.
A lot of times it's challenging to get that "perfect balance" between user friendliness and appearance. I must say you have done a great job with this. Additionally, the blog loads extremely quick for me on Safari. Outstanding Blog!Visit my website at <a href="http://vezha.kiev.ua/index.php/%D0%A3%D1%87%D0%B0%D1%81%D1%82%D0%BD%D0%B... worx</a>
More Hints (not verified)
2013, June 5 - 01:41
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Howdy would you mind letting me know which webhost you're using? I've loaded your
blog in 3 completely different browsers and I must say this blog loads a lot faster then most.
Can you suggest a good internet hosting provider at a honest price?
Cheers, I appreciate it!
Obrusy 120X180 (not verified)
2013, June 5 - 03:27
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Pretty nice post. I just stumbled upon your weblog and wanted to say that I've truly enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again very soon!Visit my website at <a href="http://comunidad.molinux.info/index.php/Usuario:LouiseSEY">Obrusy 120X180</a>
,drzwi przeciwp... (not verified)
2013, June 5 - 03:57
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Hurrah! At last I got a blog from where I be able
to actually obtain helpful information concerning my study and knowledge.
Visit my website at <a href="http://wiki.comics.org.nz/index.php?title=User:Maple35G">,drzwi przeciwpożarowe radom</a> ;-)
księgi wieczyst... (not verified)
2013, June 5 - 08:09
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Hello friends, pleasant paragraph and nice urging commented at this place, I am genuinely enjoying by these.
Visit polish website at <a href="http://wiki.lesexplorateurs.org/index.php/Index.php">księgi wieczyste adres</a>
laminate floori... (not verified)
2013, June 5 - 10:12
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
I have read so many posts on the topic of the blogger lovers but this post
is actually a good paragraph, keep it up.Visit my website at
<a href="http://www.mruads.com/profile/MinervaEz">laminate flooring rockingham</a>
Waeselynck Raphaël (not verified)
2012, February 22 - 16:55
Permalink
drupal behaviors
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);
Ben (not verified)
2012, August 23 - 17:56
Permalink
Morche pos... :(
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 !!
Ben (not verified)
2012, August 23 - 17:56
Permalink
Morche pos... :(
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 !!
bike of the Yea... (not verified)
2013, June 5 - 01:12
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
I read this piece of writing fully on the topic of the difference of newest and previous technologies, it's amazing article.Visit my website at <a href="http://wiki.virtyola.ru/index.php/Index.php">bike of the Year 2012</a>
ensuseSpegree (not verified)
2013, June 5 - 01:38
Permalink
asdqwsd
http://achatcialisenligne.lo.gs/ achat cialis
http://prixcialisfrance.lo.gs/ acquistare cialis
http://comprarcialisgenerico.lo.gs/ cialis
http://comprarecialisitalia.lo.gs/ cialis online
sofa 32 deep (not verified)
2013, June 5 - 01:53
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Excellent post. Keep writing such kind of information on your blog.
Im really impressed by your blog.
Hi there, You've done a great job. I'll definitely digg it
and for my part suggest to my friends. I am confident
they'll be benefited from this site.Visit my website article at <a href="http://konstantinym.com/knowledge/index.php/%D0%A3%D1%87%D0%B0%D1%81%D1%... 32 deep</a>
Damian (not verified)
2013, June 5 - 01:59
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
I got this website from my friend who informed me on the topic of this web site and now this time
I am browsing this web page and reading very informative articles or reviews here.
karnisze hurt (not verified)
2013, June 5 - 02:17
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Very shortly this web page will be famous among all blogging and site-building
visitors, due to it's pleasant articles or reviewsVisit my site at <a href="http://wiki.webformsmvp.com/index.php?title=User:MarcyOwen">karnisze hurt</a>
obrusy haftowan... (not verified)
2013, June 5 - 03:12
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Undeniably believe that which you said. Your favorite
reason seemed to be on the net the easiest thing to be aware of.
I say to you, I certainly get annoyed while people consider worries that
they plainly do not know about. You managed to hit the nail upon the
top as well as defined out the whole thing without having side
effect , people can take a signal. Will probably be back to get more.
ThanksVisit my website at <a href="http://facemasre.com/index.php?do=/profile-62511/info/">obrusy haftowane urbanowicz</a>
ubezpieczenia ... (not verified)
2013, June 5 - 03:26
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Do you mind if I quote a couple of your articles as long as I provide credit and
sources back to your website? My website is in
the very same niche as yours and my users would certainly benefit from a lot
of the information you provide here. Please let me know if
this ok with you. Thank you!Visit my website at <a href="http://manydoorsopen.akki.fr/index.php?do=/blog/27/ubezpieczenie-turysty...ubezpieczenia turystyczne warta</a>
księgi wieczyst... (not verified)
2013, June 5 - 06:51
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Hey There. I found your blog using msn. This is a really well
written article. I'll make sure to bookmark it and come back to read more of your useful info. Thanks for the post. I'll definitely return.
Visit polish website at <a href="http://wiki.unit-online.ru/index.php?title=%D0%A3%D1%87%D0%B0%D1%81%D1%8...ęgi wieczyste numer działki</a>
karnisze zegar ... (not verified)
2013, June 5 - 06:56
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Your style is very unique compared to other folks I've read stuff from. I appreciate you for posting when you have the opportunity, Guess I will just book mark this site.Visit my store at <a href="http://wiki.master-test.net/ru/index.php?title=%D0%A3%D1%87%D0%B0%D1%81%... zegar cennik</a>
gucci outlet (not verified)
2013, June 5 - 07:57
Permalink
gucci outlet
Look At THIS Web-Site
ecommerce 4d (not verified)
2013, June 5 - 08:09
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Thanks for another great article. The place else may anybody
get that type of info in such an ideal method of
writing? I have a presentation subsequent week, and I'm at the look for such information.Visit our polish website at <a href="http://wiki.directvelo.com/index.php/Utilisateur:LayneSQP">ecommerce 4d</a>
altec leasing 886b (not verified)
2013, June 5 - 09:41
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
I comment each time I appreciate a post on a website or if I have
something to add to the conversation. Usually
it is triggered by the passion communicated in the article I browsed.
And on this post Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM.
I was moved enough to post a commenta response :-P I actually do
have 2 questions for you if you do not mind. Could it be simply me or do some
of the comments appear like written by brain dead individuals?
:-P And, if you are writing on other places, I
would like to follow everything fresh you have to post.
Could you make a list every one of all your public sites like
your twitter feed, Facebook page or linkedin profile?
Viist my website at <a href="http://www.freakboo.com/MarvinWel">altec leasing 886b</a>
bike knee pads (not verified)
2013, June 5 - 10:56
Permalink
Utiliser jQuery avec Drupal 7 - Tutoriels Drupal | LEKTUM
Hello, Neat post. There is a problem along with your site in web explorer, might check this?
IE nonetheless is the marketplace chief and a big part of folks will miss your
wonderful writing due to this problem.Visit my website at <a href="http://www.arcemu.org/wiki/User:MarciaEct">bike knee pads</a>
Add new comment