it-swarm.it

Conflitti nel menu Javascript

Sto convertendo un sito Web statico in un modello Joomla 3.3. che ha un menu javascript a discesa a 1 livello questa è la funzione inclusa nel mio "index.html"

 $ (function () {
 /**
 * per ciascun elemento del menu, su mouseenter, 
 * ingrandiamo l'immagine e mostriamo sia sdt_active span che 
 * sdt_wrap span. Se l'elemento ha un sottomenu (sdt_box), 
 * allora lo facciamo scorrere - se l'elemento è l'ultimo nel menu 
 * lo facciamo scorrere a sinistra, altrimenti a destra 
 */
 $ ('# sdt_menu> li'). bind ('mouseenter', function () {
 var $ elem = $ (this); 
 $ elem.find ('img') 
 .stop (true) 
 .animate ({
 'larghezza': '170px', 
 'height': '170px', 
 'left': '0px' 
}, 400, 'easyOutBack') 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (true ) 
 .animate ({'top': '140px'}, 500, 'easyOutBack') 
 .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) 
. animate ({
 'width': '0px', 
 'height': '0px', 
 'left': '85px' 
}, 400) 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (true) 
 .animate ({'top': '15px'}, 500); 
}); 
}); 

e usa easing.js così come ero incluso nella testa.

poiché l'indice di Joomla è in PHP, quindi ho incluso easing.js come segue:

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

e ho copiato e incollato la funzione su main.js e l'ho caricata sul mio index.php, ma non ha funzionato.

quindi ho inserito lo script in index.php - non ha funzionato altrettanto bene ...

Non so come farlo funzionare. (Ho creato il menu come un modulo html personalizzato)

quindi cosa dovrei fare ?

2
Elhamy

Ok, una cosa con Joomla non è mai usare il carattere $ Per jQuery senza assicurarsi che non sia in conflitto con i mootools. Joomla è migliorata, ma è meglio usare solo jQuery anziché $ Secondo me. È molto meno stressante rispetto agli altri modi.

Suppongo anche che l'HTML si carichi bene? semplicemente nessun Javascript? Ecco alcuni pensieri per aiutarlo:

$(function () {

Passa a questo

jQuery(document).ready(function(){

Entrambi alla fine fanno la stessa cosa, anche se è già più facile vedere la funzione "onload" e rende meno confuso in seguito aggiungerne di più se necessario, anche come indicato sopra sostituendo $ Con jQuery può aiutare con la compatibilità dei mootools (insieme ad altre librerie JS in Joomla).

Usa anche console.log Se non ci sono errori per tracciare ciò che non sta accadendo. Lo script non si sta caricando? Prova a includere qualcosa come console.log('loaded'); proprio all'interno della funzione iniziale, questo dovrebbe dirti se ha caricato gli script. Quindi aggiungili anche agli eventi di bind per vedere se gli eventi mouseenter non vengono chiamati. Se tutto sembra caricare, puoi dividere la catena di funzioni e console.log L'output per vedere se è quello che ti aspetteresti. Tuttavia, tutto questo si basa su almeno alcuni Javascript come, tuttavia per dare una risposta più chiara avrò bisogno di vedere anche l'HTML per il modulo.

Il resto di seguito è il mio post originale e assume un normale modulo di menu, non ho visto che era personalizzato fino a quando non sono arrivato così lontano, ma lo lascerò perché potrebbe aiutare gli altri.

Assicurarsi che l'ID nel modulo menu sia impostato correttamente, ispezionare il menu per assicurarsi che anche tutti gli ID/classi siano corretti.

Se hai bisogno di una classe root, fai attenzione con il suffisso. Ti fa pensare che aggiunge una classe ma in realtà aggiunge qualsiasi cosa alla fine della classe corrente, quindi uno spazio lo induce ad aggiungere la propria classe, separata da quella predefinita. Questo è un problema che ho visto su alcuni siti Web e JS personalizzato nei menu. Pertanto, durante la creazione del modulo menu, assicurarsi di utilizzare

" sdt_menu"

3
Jordan Ramstad