web-dev-qa-db-fra.com

Conflits de menu Javascript

Je convertis un site Web statique en un modèle Joomla 3.3. qui a 1 menu déroulant de niveau niveau menu javascript c'est la fonction incluse dans mon "index.html"

 $ (function () {
 /**
 * pour chaque élément du menu, dans mouseenter, 
 * nous agrandissons l'image et montrons à la fois sdt_active span et 
 * sdt_wrap span. Si l'élément a un sous-menu (sdt_box), 
 *, nous le glissons - si l'élément est le dernier du menu 
 * nous le glissons à gauche, sinon à droite 
 */
 $ ('# sdt_menu> li'). bind ('mouseenter', function () {
 var $ elem = $ (this); 
 $ elem.find ('img') 
 .stop (true) 
 .animate ({
 'width': '170px', 
 'hauteur': '170px', 
 'gauche': '0px' 
}, 400, 'aisance ", 
 .etSelf () 
 .find ('. sdt_wrap') 
 .stop (true ) 
 .animate ({'top': '140px'}, 500, 'easOutBack') 
 .etSelf () 
 .find ('. sdt_active') 
 .stop (true) 
 .animate ({'height': '170px'}, 300, function () {
 var $ sub_menu = $ elem.find ('. sdt_box') ; 
 if ($ sub_menu.length) {
 var left = '170px'; 
 if ($ elem.parent (). children (). length == $ elem. index () + 1) 
 left = '-170px'; 
 $ sub_menu.show (). animate ({'left': left}: 200}; 
} 
}); 
}) .bind ('mouseleave', function () {
 var $ elem = $ (this); a. 
 var $ sub_menu = $ elem .find ('. sdt_box'); 
 if ($ sub_menu.length) 
 $ sub_menu.hide (). css ('left', '0px'); 
 
 $ elem.find ('. sdt_active') 
 .stop (true) 
 .animate ({'height': '0px'}, 300) 
 .andSelf (). find ('img') 
 .stop (true) 
. animate ({
 'width': '0px', 
 'height': '0px', 
 'left': '85px' 
}, 400) 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (true) 
 .animate ({'top': '15px'}, 500); 
}); 
});

et il utilise easing.js aussi bien que j’étais inclus dans la tête.

puisque l'index de Joomla est dans PHP, j'ai donc inclus easing.js comme suit:

$ doc-> addScript ('/ templates /'. $ this-> template. '/js/easing.js', 'text/javascript');

et j'ai copié et collé la fonction dans main.js et chargé dans mon index.php, mais cela n'a pas fonctionné.

donc j'ai mis le script dans le fichier index.php - cela n'a pas fonctionné aussi bien ...

Je ne sais pas comment le faire fonctionner. (J'ai créé le menu en tant que module custom-html)

donc qu'est ce que je devrais faire ?

joomla-3.3.xmodulejavascript
2
Elhamy

Ok, une chose avec Joomla est de ne jamais utiliser le caractère $ Pour jQuery sans s’assurer que cela n’est pas en conflit avec mootools. Joomla s'est amélioré, mais il est préférable d'utiliser jQuery plutôt que $ À mon avis. C'est beaucoup moins stressant que les autres moyens.

Aussi je suppose que le HTML se charge bien? juste pas de Javascript? Voici quelques idées pour vous aider:

$(function () {

Basculer avec

jQuery(document).ready(function(){

Ils font tous les deux la même chose à la fin, bien que .ready soit plus facile à voir comme fonction "onload" et rend moins compliqué d’ajouter plus tard si nécessaire, comme indiqué plus haut en remplaçant $ Par jQuery peut aider à la compatibilité de mootools (avec d'autres bibliothèques JS dans Joomla).

Utilisez également console.log S'il n'y a pas d'erreur pour suivre ce qui ne se produit pas. Le script ne se charge-t-il pas? Essayez d'inclure quelque chose comme console.log('loaded'); à l'intérieur de la fonction initiale, cela devrait vous dire si les scripts ont été chargés. Ajoutez-les également aux événements de liaison pour voir si les événements mouseenter ne sont pas appelés. Si tout semble se charger, vous pouvez fractionner la chaîne de fonctions et console.log La sortie pour voir si c'est ce que vous attendez. Cependant, tout est basé sur au moins quelques connaissances en Javascript, mais pour donner une réponse plus claire, je devrai également consulter le code HTML du formulaire.

Le reste ci-dessous est mon article d'origine et suppose un module de menu normal, je ne voyais pas que c'était coutume jusqu'à ce que je sois arrivé jusqu'ici, mais je vais le laisser car cela pourrait aider les autres.

Assurez-vous que l'ID dans le module de menu est défini correctement, inspectez le menu pour vous assurer que tous les identificateurs/classes sont également corrects.

Si vous avez besoin d'une classe racine, soyez prudent avec le suffixe. Cela vous fait penser que cela ajoute une classe, mais qu'il ajoute quoi que ce soit à la fin de la classe actuelle, donc un espace l'incite à ajouter sa propre classe, distincte de la classe par défaut. C’est un problème que j’ai vu sur quelques sites Web et sur les menus JS personnalisés. Ainsi, lors de la création du module de menu, assurez-vous de pouvoir utiliser

" sdt_menu"

3
Jordan Ramstad