Noconflict jQuery avec MooTools

**visual3d** · 17/04/2009, 11h40

Bonjour à tous!

J'èspere ne pas ouvrir un post inutilement...mais je ne trouve aucun post assez explicatif (je suis debutant

)

Alors je me pose des questions sur l'implémentation du Jquery noconflict avec la livrairie mootools:

J'ai suivi ce billet qui m'a l'air assez explicatif, mais je n'y arrive pas

C'est au niveau de la relation div => css que je n'y comprend pas grand chose.

Ci-dessous mon index.php :

Mon index contient pas mal de scripts utilisant jquery avec des liens vers des css et des .js associé au scripts et un script basée sur mootools

Illustration :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
 
<head>
<link type="text/css" href="/javascripts/element/theme.css" rel="stylesheet" />
<script src="/javascripts/element/element.js" type="text/javascript"></script>
 
//script en relation avec element.js :
 
<script type="text/javascript"> 
            $(function() {
 
                $('#container-1').tabs();
                $('#container-2').tabs(2);
...
</script>
 
<link type="text/css" href="/javascripts/autre_script/theme.css" rel="stylesheet" />
<script src="/javascripts/autre_script/autre_script.js" type="text/javascript">
 
//script en relation avec autre_script.js :
 
		<script type="text/javascript">
			$().ready(function() {
				$('.kwicks').kwicks({
					maxWidth : 205,  // required attribute
					spacing : 5
				});
			});
		</script>
</script>  
....
.....ainsi de suite pour plusieurs scripts
En dernier on a :
 
<script src="/javascripts/mootools.js" type="text/javascript"></script> 
<script type="text/javascript"> //mon seul script mootools
            $(function() {
 
                $('#test-1').tabs();
                $('#test-2').tabs(2);
...
</script> 
 <script src="/javascripts/jquery-1.3.2.min.js" type="text/javascript"></script>  
 <script type="text/javascript">
var J = jQuery.noConflict();  
J('#madiv').css('color','red');  
</script> 
</head> 
<body>
 
<div id="container"> 
 
<div id="contenu">  
 
<div id="element"></div>
<div id="autre_script"></div>
 
</div>
 
</div>
</body>

-----------------------------------------------------------------
Voici mes questions :

- Dans les divers scripts de mon head au début, je dois changer chaque $ par J pour attribuer le jquery noconflict ?

- Pour l'expression : J('#madiv').css('color','red'); => je dois attribuer le nom de la div qui est en relation avec le script ainsi que son theme.css ?

- Et pour le script utilisant mootools je le laisse tel quel avec les $ ?

- En gros, je ne sais pas ce que je dois changer et pour chaque script...

-------------------------------

Si quelqu'un pourrait m'aider ça serait sympa.

Bonne journée.

**frakosun** · 04/06/2009, 13h41

tu dois appeler la fonction jQuery.noConflict(); puis remplacer tous les $('#....') de ton code par jQuery('#....')

du style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript"> 
            $(function() {
                jQuery.noConflict();
                jQuery('#container-1').tabs();
                jQuery('#container-2').tabs(2);

Lors de l'appel des libraires tu dois faire attention à l'ordre d'appel des librairies:
Jquery puis tes scripts Jquery puis Mootools...

**nizar94** · 29/07/2009, 11h35

Salut, je débute également, as tu trouvé comment faire exactement visual3d car je suis toujours perdu malgré les explications précédentes

**danielhagnoul** · 30/07/2009, 00h48

Bonsoir visual3d.

La solution avec jQuery.noConflict() n'est pas toujours simple à mettre en oeuvre, personnellement je préconise l'usage de la clôture jQuery, voir : http://danielhagnoul.developpez.com/.../cloturer.html

Noconflict jQuery avec MooTools

jQuery

Vue hybride

Discussions similaires

Partager

Partager