it-swarm-es.tech

Conflictos del menú Javascript

Estoy convirtiendo un sitio web estático en una plantilla de Joomla 3.3. que tiene un menú javascript de cuadro desplegable de 1 nivel, esta es la función incluida en mi "index.html"

 $ (function () {
 /**
 * para cada elemento del menú, en mouseenter, 
 * ampliamos la imagen y mostramos tanto el intervalo sdt_active como el 
 * sdt_wrap span. Si el elemento tiene un submenú (sdt_box), 
 * entonces lo deslizamos - si el elemento es el último en el menú 
 * lo deslizamos a la izquierda, de lo contrario a la derecha 
 */
 $ ('# sdt_menu> li'). bind ('mouseenter', function () {
 var $ elem = $ (esto); 
 $ elem.find ('img') 
 .stop (true) 
 .animate ({
 'width': '170px', 
 'height': '170px', 
 'left': '0px' 
}, 400, 'easeOutBack') 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (verdadero ) 
 .animate ({'top': '140px'}, 500, 'easeOutBack') 
 .andSelf () 
 .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); 
 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) 
. animado ({
 'ancho': '0px', 
 'altura': '0px', 
 'izquierda': '85px' 
}, 400) 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (true) 
 .animate ({'top': '15px'}, 500); 
}); 
}); 

y usa easing.js y también me incluyeron en la cabeza.

dado que el índice de Joomla está en PHP, entonces he incluido easing.js de la siguiente manera:

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

copié y pegué la función en main.js y la cargué en mi index.php, pero no funcionó.

así que puse el script dentro del index.php - no funcionó tan bien ...

No sé cómo hacerlo funcionar. (He creado el menú como un módulo html personalizado)

entonces qué debo hacer ?

2
Elhamy

Ok, una cosa con Joomla es nunca usar el carácter $ Para jQuery sin asegurarse de que no entre en conflicto con los mootools. Joomla ha mejorado, pero es mejor usar jQuery en lugar de $ En mi opinión. Es mucho menos estresante que las otras formas.

¿También supongo que el HTML se carga bien? simplemente no Javascript? Aquí hay algunas ideas para ayudar con eso:

$(function () {

Cambia esto con

jQuery(document).ready(function(){

Ambos hacen lo mismo al final, aunque .ready es más fácil de ver como la función "onload" y hace que sea menos confuso más tarde agregarle más si es necesario, también como se indicó anteriormente, reemplazando $ Con jQuery puede ayudar con la compatibilidad de mootools (junto con otras bibliotecas JS en Joomla).

También use console.log Si no hay errores para rastrear lo que no está sucediendo. ¿El script no se carga? Intente incluir algo como console.log('loaded'); justo dentro de la función inicial, esto debería decirle si cargó los scripts. Luego, agréguelos también a los eventos de enlace para ver si no se están llamando a los eventos mouseenter. Si todo parece cargarse, puede dividir la cadena de funciones y console.log La salida para ver si es lo que esperaría. Sin embargo, todo esto se basa en al menos algunos conocimientos de Javascript, sin embargo, para dar una respuesta más clara, también necesitaré ver el HTML del formulario.

El resto a continuación es mi publicación original y supone un módulo de menú normal, no vi que era personalizado hasta que llegué tan lejos, pero voy a dejarlo ya que podría ayudar a otros.

Asegúrese de que la ID en el módulo de menú esté configurada correctamente, inspeccione el menú para asegurarse de que todas las ID/clases también sean correctas.

Si necesita una clase raíz, tenga cuidado con el sufijo. Te hace pensar que agrega una clase pero en realidad agrega lo que sea al final de la clase actual, por lo que un espacio lo engaña para que agregue su propia clase, separada de la predeterminada. Este es un problema que he visto en algunos sitios web y JS personalizados en el menú. Entonces, al crear el módulo de menú, asegúrese de usar

" sdt_menu"

3
Jordan Ramstad