ti-enxame.com

Conflitos no menu Javascript

Estou convertendo um site estático em um modelo do Joomla 3.3. que tem um menu javascript de caixa suspensa de nível, essa é a função incluída no meu "index.html"

 $ (function () {
 /****.____.] * para cada elemento do menu, no mouseenter, 
 * aumentamos a imagem e mostramos a extensão sdt_active e 
 * extensão sdt_wrap. Se o elemento possuir um submenu (sdt_box), 
 *, nós o deslizaremos - se o elemento for o último no menu 
 * nós o deslizaremos à esquerda, caso contrário, à direita 
 */
 $ ('# sdt_menu> li'). bind ('mouseenter', função () {
 var $ elem = $ (this); 
 $ elem.find ('img') 
 .stop (true) 
 .animate ({
 'width': '170px', 
 'height': '170px', 
 'left': '0px' 
}, 400, 'comfortOutBack') 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (true ) 
 .animate ({'top': '140px'}, 500, 'comfortOutBack') 
 .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 (). 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 ('esquerda', '0px'); 
 
 $ elem.find ('. sdt_active') 
 .stop (true) 
 .animate ({'height': '0px'}, 300) 
 .eSelf (). find ('img') 
 .stop (true) 
. animar ({
 'width': '0px', 
 'height': '0px', 
 'left': '85px' 
}, 400) 
 .eSelf () 
. find ('. sdt_wrap') 
 .stop (true) 
 .animate ({'top': '15px'}, 500); 
}); 
}); 

e usa easing.js, assim como eu fui incluído na cabeça.

como o índice do Joomla está em PHP, então incluí easing.js da seguinte forma:

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

copiei e colei a função em main.js e carreguei-a no meu index.php, mas não funcionou.

então eu coloquei o script dentro do index.php - não funcionou tão bem ...

Não sei como fazê-lo funcionar. (Criei o menu como um módulo html personalizado)

então, o que eu deveria fazer ?

2
Elhamy

Ok, uma coisa com o Joomla é nunca usar o caractere $ Para o jQuery sem ter certeza de que não está em conflito com o mootools. O Joomla ficou melhor, mas é melhor apenas usar jQuery em vez de $ Na minha opinião. É muito menos estressante do que as outras formas.

Também suponho que o HTML carrega bem? apenas sem Javascript? Aqui estão alguns pensamentos para ajudar com isso:

$(function () {

Troque isso com

jQuery(document).ready(function(){

Ambos fazem a mesma coisa no final, embora já seja mais fácil ver como a função "onload" e torne menos confuso posteriormente adicionar mais, se necessário, também como indicado acima, substituindo $ Por jQuery pode ajudar com a compatibilidade do mootools (junto com outras bibliotecas JS no Joomla).

Use também console.log Se não houver erros para rastrear o que não está acontecendo. O script não está carregando? Tente incluir algo como console.log('loaded'); dentro da função inicial, isso deve informar se ele carregou os scripts. Em seguida, adicione-os aos eventos de ligação também para ver se os eventos mouseenter não estão sendo chamados. Se tudo parecer carregar, você poderá dividir a cadeia de funções e console.log A saída para ver se é o que você esperaria. No entanto, tudo isso é baseado em pelo menos algum conhecimento de Javascript, no entanto, para dar uma resposta mais clara, também precisarei ver o HTML do formulário.

O restante abaixo é a minha postagem original e assume um módulo de menu normal, não vi que era personalizado até chegar até aqui, mas vou deixá-lo, pois isso pode ajudar outras pessoas.

Verifique se o ID no módulo de menu está definido corretamente, inspecione o menu para garantir que todos os IDs/classes também estejam corretos.

Se você precisar de uma classe raiz, tenha cuidado com o sufixo. Isso faz você pensar que ele adiciona uma classe, mas na verdade adiciona o que quer que seja ao final da classe atual; portanto, um espaço o leva a adicionar sua própria classe, separada do padrão. Esse é um problema que eu já vi em alguns sites e JS personalizados no menu. Portanto, ao criar o módulo de menu, certifique-se de usar

" sdt_menu"

3
Jordan Ramstad