jQuery et Mootools en même temps avec le mode noConflict

Mars 2013

Pour utiliser jQuery en même temps que Mootools (en parallèle) sur une page web, il faut utiliser le mode noConflict, car beaucoup de framework utilisent une fonction nommée $, et les différentes librairies peuvent se marcher dessus.

Lorsque jQuery est inclus, au moment où jQuery déclare la fonction $, il va faire une "sauvegarde" de l'objet $ déjà défini, en gardant une référence vers cette variable. La fonction jQuery.noConflict permet tout simplement de restaurer cette variable, comme elle était avant l'inclusion de jQuery.

Voici comment faire :

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery.noConflict + Mootools</title>
	
	<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script>jQuery.noConflict();</script>
</head>
<body>
	<p>Lorem ipsum</p>
</body>
</html>

Une fois qu'on a appelé jQuery.noConflict, on ne peut bien évidemment plus utiliser $ pour faire référence à jQuery. Il faut écrire jQuery à la place, comme ça :

jQuery(document).ready(function(){
	jQuery('body').append('<p>Salut</p>');
});

Après avoir lu créer un calendrier automatique avec excel vous en saurez d'avantage sur ce sujet.

Voici une petite astuce très utile qui permet d'utiliser $ à l'intérieur d'une fonction jQuery, généralement le dom ready :

jQuery(document).ready(function($){
	$('body').append('<p>Salut</p>');
});

La technique est toujours la même quelque soit la librairie (Mootools, Dojo, YUI, AngularJS, Prototype, scriptaculous ou ExtJS) : il faut inclure jQuery en dernier, puis appeler jQuery.noConflict. On peut aussi s'en servir pour inclure 2 versions différentes de jQuery en même temps.

Découvrez ce tutoriel photoshop : affiche de film "invasion" à lire tout de suite !

Fil de lecture

0 commentaire