Fork me on GitHub






Rendre jQuery compatible avec d'autres bibliothèques de scripts: facile !
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1404
jQuery est parfois en conflit avec d'autres bibliothèques de scripts (comme mootools par exemple) ... mais il est très facile de le rendre compatible !


Procédure:

Dans le fichier javascript qui utilise des fonctions faisant appel à jQuery utiliser la fonction jQuery.noConflict(); et remplacer tous les caractères "$" qui appellent jQuery par "jQuery"


Exemple pratique:

1/ Sans mode compatibilité:

Citation :

$(document).ready(function() {

$("a").click(function() {
alert("Hello world!");
});

});



2/ En mode compatibilité:

Citation :

jQuery.noConflict();

jQuery(document).ready(function() {

jQuery("a").click(function() {
alert("Hello world!");
});

});



Et c'est tout !

Cela m'a été très utile pour utiliser le thème maitscoCorporate par exemple, qui combine jQuery et mootools.

Posté le : 22/11/2010 12:05

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Rendre jQuery compatible avec d'autres bibliothèques de scripts: facile !
Régulier
Inscrit: 11/10/2010 10:47
Messages: 204
Bonjour,

J'utilise le meme theme que toi , mais j'avoue que je n'arrive pas trouver ce que tu as modifié ??
Pourrais tu m'aider ?
(mon probleme est qu'en xoops 2.5 , apres connexion : le slider s'arrete)

Par avance,

Merci

Posté le : 24/11/2010 15:11

Retrouvez moi sur http://www.hkrag.fr
Autre : http://www.cdf-groupe.org
Solutions Hebergement Xoops: http://www.cdfi-hebergement.com
Partager Twitter Partagez cette article sur GG+
Re: Rendre jQuery compatible avec d'autres bibliothèques de scripts: facile !
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1404
Ma version de xoops est 2.4.5.
Voici une copie de la partie HEAD de theme.html, regarde la section "COMPATIBILITE" :

<head>
    <!-- 
Assign Theme name -->
    <{
assign var=theme_name value=$xoTheme->folderName}>

    <!-- 
Title and meta -->
    <
meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <
meta http-equiv="content-language" content="<{$xoops_langcode}>" />
    <
meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
    <
title><{if $xoops_pagetitle !=''}><{$xoops_pagetitle}> - <{/if}><{$xoops_sitename}></title>
    <
meta name="robots" content="<{$xoops_meta_robots}>" />
    <
meta name="keywords" content="<{$xoops_meta_keywords}>" />
    <
meta name="description" content="<{$xoops_meta_description}>" />
    <
meta name="rating" content="<{$xoops_meta_rating}>" />
    <
meta name="author" content="<{$xoops_meta_author}>" />
    <
meta name="copyright" content="<{$xoops_meta_copyright}>" />
    <
meta name="generator" content="XOOPS" />

    <!-- 
Rss -->
    <
link rel="alternate" type="application/rss+xml" title="" href="<{xoAppUrl backend.php}>" />

    <!-- 
Favicon -->
    <
link rel="shortcut icon" type="image/ico" href="<{xoImgUrl icons/favicon.ico}>" />
    <
link rel="icon" type="image/png" href="<{xoImgUrl icons/favicon.png}>" />

    <!-- 
Sheet Css -->
    <
link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoAppUrl xoops.css}>" />
    <
link rel="stylesheet" type="text/css" media="all" title="Style sheet" href="<{xoImgUrl style.css}>" />
    <
link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css"/>
    <!--[if 
lte IE 8]>
    <
link rel="stylesheet" href="<{xoImgUrl styleIE8.css}>" type="text/css" />
    <![endif]-->
    
    <!-- 
JS -->
    <{if 
$xoops_dirname != "publisher"}>
<
script type="text/javascript" src="<{$xoops_url}>/browse.php?Frameworks/jquery/jquery.js"</script>
<script type="text/javascript" src="<{$xoops_imageurl}>js/curvycorners.src.js"> </script>
<{/if}>
    <script type="text/javascript" src="<{$xoops_imageurl}>js/s3Slider.js"> </script>

    <!-- customized header contents -->

<!-- =========== COMPATIBILITE =========== -->

<script type="text/javascript">
    jQuery.noConflict();  
    jQuery(document).ready(function($) {
        $('#slider1').s3Slider({
            timeOut: 5000 
        });
    });
</script>

<!-- ===================================== -->


<script type="text/javascript"> 
var curvyCornersVerbose = false; 
</script>
    <script type="text/javascript" src="<{xoImgUrl js/popup.js}>" charset="utf-8"> </script>
    <script src= <{xoImgUrl js/mootools-1.2.5.js}>  type="text/javascript"></script>
    <{$xoops_module_header}>

</head>

Posté le : 24/11/2010 21:51

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Rendre jQuery compatible avec d'autres bibliothèques de scripts: facile !
Régulier
Inscrit: 11/10/2010 10:47
Messages: 204
Bonjour,

Merci,
Je comprends maintenant,
On ne doit pas avoir la meme version du theme :
Chez moi , je n'ai pas le mootools:

fin du head:
<!-- customized header contents -->
    <{
$xoops_module_header}>
<
script type="text/javascript">
   
jQuery.noConflict();  
jQuery(document).ready(function($) {
        $(
'#slider1').s3Slider({
            
timeOut5000 
        
});
    });
</script>  
<script type="text/javascript"> 
var curvyCornersVerbose = false; 
</script>  
</head>


je viens de re telecharger le theme sur le site:
http://www.maitsco.com/

et idem :
pas de mootools ????

Peux tu stp me faire parvenir le theme , ou me donner TON lien de telechargement ?

Par avance, Merci

Posté le : 25/11/2010 05:09

Retrouvez moi sur http://www.hkrag.fr
Autre : http://www.cdf-groupe.org
Solutions Hebergement Xoops: http://www.cdfi-hebergement.com
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant




Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

23 Personne(s) en ligne (14 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 23 | Plus ...