Onglets Jquery en conflit avec le curseur de révolution

Au début de tabs.js, nous avons la déclaration:

 var tpj=jQuery; tpj.noConflict(); 

cela définit la variable tpj sur l’object jQuery , puis place jQuery dans noConflict () :

“De nombreuses bibliothèques JavaScript utilisent $ comme nom de fonction ou de variable, tout comme jQuery. Dans le cas de jQuery, $ est simplement un alias pour jQuery. Par conséquent, toutes les fonctionnalités sont disponibles sans utiliser $ . Si vous devez utiliser une autre bibliothèque JavaScript à côté de jQuery, renvoyer le contrôle de $ vers l’autre bibliothèque avec un appel à $ .noConflict () . ”

Maintenant que jQuery n’est pas en mode conflit, vous ne pouvez plus utiliser $ pour accéder à jQuery. Donc, quand on lance le code au bas de tabs.js:

 $(document).ready(function(){ $('#tabs div').hide(); $('#tabs div:first').show(); $('#tabs ul li:first').addClass('active'); $('#tabs ul li a').click(function(){ $('#tabs ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#tabs div').hide(); $(currentTab).show(); return false; }); }); 

Nous obtenons l’erreur

“TypeError non capturé: La propriété ‘$’ de l’object [object Objet] n’est pas une fonction”

parce que $ ne fait plus référence à jQuery . Pour accéder à jQuery, nous devons utiliser jQuery ou tpj

si nous modifions les tabs.js en remplaçant $ par jQuery ou tpj

 tpj(document).ready(function(){ tpj('#tabs div').hide(); tpj('#tabs div:first').show(); tpj('#tabs ul li:first').addClass('active'); tpj('#tabs ul li a').click(function(){ tpj('#tabs ul li').removeClass('active'); tpj(this).parent().addClass('active'); var currentTab = tpj(this).attr('href'); tpj('#tabs div').hide(); tpj(currentTab).show(); return false; }); }); 

le code doit s’exécuter correctement.

Utilisez Dernière version de la bibliothèque jQuery (1.7.1 +) et essayez de modifier le code ci-dessus afin de combiner les deux en un seul fichier dans init.js et en plaçant au bas de tous les fichiers * .js inclus dans une page.

  jQuery(document).ready(function() { if (jQuery.fn.cssOriginal!=undefined) jQuery.fn.css = jQuery.fn.cssOriginal; jQuery('.fullwidthbanner').revolution({ delay:9000, startwidth:1024, startheight:616, onHoverStop:"on", // Stop Banner Timet at Hover on Slide on/off thumbWidth:100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !) thumbHeight:50, thumbAmount:3, navigationStyle:"round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom navigationHAlign:"center", // Vertical Align top,center,bottom navigationVAlign:"top", // Horizontal Align left,center,right navigationHOffset:0, navigationVOffset:20, soloArrowLeftHalign:"left", soloArrowLeftValign:"center", soloArrowLeftHOffset:20, soloArrowLeftVOffset:0, soloArrowRightHalign:"right", soloArrowRightValign:"center", soloArrowRightHOffset:20, soloArrowRightVOffset:0, touchenabled:"off", // Enable Swipe Function : on/off stopAtSlide:1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case. stopAfterLoops:0, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic hideCaptionAtLimit:0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser) hideAllCaptionAtLilmit:0, // Hide all The Captions if Width of Browser is less then this value hideSliderAtLimit:0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value fullWidth:"on", shadow:0 //0 = no Shadow, 1,2,3 = 3 Different Art of Shadows - (No Shadow in Fullwidth Version !) }); }); jQuery(document).ready(function(){ jQuery('#tabs div').hide(); jQuery('#tabs div:first').show(); jQuery('#tabs ul li:first').addClass('active'); jQuery('#tabs ul li a').click(function(){ jQuery('#tabs ul li').removeClass('active'); jQuery(this).parent().addClass('active'); var currentTab = jQuery(this).attr('href'); jQuery('#tabs div').hide(); jQuery(currentTab).show(); return false; }); }); 

Nous sums tombés sur ce problème tout en obtenant un modèle de page de destination HTML, CSS / JS en conserve pour qu’il fonctionne sur Meteor. Dans mon cas, la suppression des fichiers jquery-1.11.1.min.js et jquery-1.11.1.min.map de la solution a permis de résoudre le problème car la version la plus récente est déjà installée en tant que package. J’espère que cela aidera un chercheur de solution dans le futur.