Utiliser jQuery avec d'autres librairies sans conflit (2388 lectures)

200930/01

jqueryComment utiliser jQuery avec d'autres librairies javascript sans conflit ?

Par défaut, jQuery utilise "$" comme raccourci pour "jQuery".
Seulement, ce raccourci est aussi employé par d'autres librairies javascript, comme Prototype, Scriptaculous, Mootoos, ...

Le principe est très simple.

Après avoir chargé vos différentes librairies, il faut changer dans toutes les méthodes propres à jQuery le mot clé "$" par "jQuery", comme par exemple :

  1. jQuery(document).ready(function(){
  2.   jQuery("ul.menu li a").click(function() {
  3.     jQuery("ul.menu > li.active").removeClass("active");
  4.     jQuery(this).parents("li").addClass("active");
  5.   });
  6. });
  7.  
  8. // dessous vos autres méthodes dépendantes des autres librairies

Si vous souhaitez conserver le "$" malgré tout, parce que vous auriez trop de lignes impactées à modifier.
Il va falloir appeler la méthode jQuery.noConflict() avant tout, et après chargement de vos librairies.

  1. jQuery.noConflict();
  2. jQuery(document).ready(function($){
  3.   $("ul.menu li a").click(function() {
  4.     $("ul.menu > li.active").removeClass("active");
  5.     $(this).parents("li").addClass("active");
  6.   });
  7. });
  8.  
  9. // les autres méthodes non jQuery dessous

Plus d'exemples à voir ici

 

Dernière modification : 30/01/2009

Catégorie : Web - Jquery -

A découvrir également :

 

Education et Territoires Maghreb propulsé par le CMS TuttiFrutti

L'Open Source séduit de plus en plus les entreprises

Commentaires

1.  posté le 30/04/2010 par yoki

merci

3.  posté le 22/07/2010 par Claudio

Bonjour,
J'ai un souci avec cette méthode je n'arrive pas a la faire fonctionner.
Voici mon exemple :

<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/captify.tiny.js"></script>
<script type="text/javascript" src="<?php echo $tmpTools->templateurl();?>/scripts/jQuery.js"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('img.captify').captify({
// all of these options are... optional
// ---
// speed of the mouseover effect
speedOver: 'fast',
// speed of the mouseout effect
speedOut: 'normal',
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'fade',
// text/html to be placed at the beginning of every caption
prefix: '',
// opacity of the caption on mouse over
opacity: '0.7',
// the name of the CSS class to apply to the caption box
className: 'caption-bottom',
// position of the caption (top or bottom)
position: 'bottom',
// caption span % of the image
spanWidth: '100%'
});
});
</script>

Merci

Ajouter un commentaire

Les champs en gras sont obligatoires.

Commentaire:

Anti-spam :
Veuillez répondre à la question suivante avant de valider votre commentaire.

La somme de 1 plus 20 est égale à