it-swarm-id.com

Konflik Menu Javascript

Saya mengonversi situs web statis ke templat Joomla 3.3. yang memiliki menu javascript kotak dropdown 1 tingkat ini adalah fungsi yang termasuk dalam "index.html" saya

 $ (function () {
 /**
 * untuk setiap elemen menu, pada mouseenter, 
 * kami memperbesar gambar, dan menampilkan rentang sdt_active dan 
 * span sdt_wrap. Jika elemen memiliki sub menu (sdt_box), 
 * maka kita geser - jika elemen adalah yang terakhir di menu 
 * kita geser ke kiri, sebaliknya ke kanan 
 */
 $ ('# sdt_menu> li') .bind ('mouseenter', function () {
 var $ elem = $ (ini); 
 $ elem.find ('img') 
 .stop (true) 
 .animate ({
 'width': '170px', 
 'tinggi': '170px', 
 'kiri': '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 = $ (ini); 
 var $ sub_menu = $ elem .find ('. sdt_box'); 
 if ($ sub_menu.length) 
 $ sub_menu.hide (). css ('kiri', '0px'); 
 
 $ elem.find ('. sdt_active') 
 .stop (true) 
 .animate ({'height': '0px'}, 300) 
. andelf (). find ('img') 
 .stop (true) 
. animate ({
 'width': '0px', 
 'height': '0px', 
 'left': '85px' 
}, 400) 
. andSelf () 
 .find ('. sdt_wrap') 
 .stop (true) 
 .animate ({'top': '15px'}, 500); 
}); 
}); 

dan itu menggunakan easing.js dan saya termasuk dalam kepala.

karena indeks Joomla ada di PHP jadi saya memasukkan easing.js sebagai berikut:

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

dan saya sudah menyalin dan menempelkan fungsi ke main.js dan memuatnya ke index.php saya, tetapi tidak berhasil.

jadi saya meletakkan skrip di dalam index.php - tidak berfungsi juga ...

Saya tidak tahu bagaimana cara membuatnya bekerja. (Saya telah membuat menu sebagai modul custom-html)

jadi apa yang harus aku lakukan ?

2
Elhamy

Ok satu hal dengan Joomla tidak pernah menggunakan karakter $ Untuk jQuery tanpa memastikan itu tidak bertentangan dengan mootools. Joomla menjadi lebih baik tetapi yang terbaik hanya menggunakan jQuery daripada $ Menurut pendapat saya. Jauh lebih sedikit stres daripada cara lain.

Saya juga menganggap HTML baik-baik saja? tidak ada Javascript? Berikut ini beberapa pemikiran untuk membantu hal itu:

$(function () {

Ganti ini dengan

jQuery(document).ready(function(){

Mereka berdua melakukan hal yang sama pada akhirnya, meskipun. Sudah lebih mudah dilihat sebagai fungsi "onload" dan membuatnya kurang membingungkan nantinya untuk menambahkan lebih banyak jika perlu, juga seperti yang dinyatakan di atas mengganti $ Dengan jQuery dapat membantu dengan kompatibilitas mootools (bersama dengan pustaka JS lainnya di Joomla).

Juga gunakan console.log Jika tidak ada kesalahan untuk melacak apa yang tidak terjadi. Apakah skrip tidak dimuat? Cobalah untuk memasukkan sesuatu seperti console.log('loaded'); tepat di dalam fungsi awal, ini akan memberi tahu Anda jika itu memuat skrip. Kemudian tambahkan mereka ke acara bind juga untuk melihat apakah acara mouseenter tidak dipanggil. Jika semuanya tampak dimuat maka Anda dapat membagi rantai fungsi ke atas dan console.log Output untuk melihat apakah itu yang Anda harapkan. Namun ini semua didasarkan pada setidaknya beberapa pengetahuan Javascript, namun untuk memberikan jawaban yang lebih jelas saya perlu melihat HTML untuk formulir juga.

Selebihnya di bawah ini adalah posting asli saya dan mengasumsikan modul menu normal, tidak melihat bahwa itu adalah kebiasaan sampai saya sampai sejauh ini tetapi saya akan meninggalkannya karena mungkin membantu orang lain.

Pastikan ID dalam modul menu diatur dengan benar, periksa menu untuk memastikan bahwa semua id/kelas sudah benar juga.

Jika Anda membutuhkan kelas root maka berhati-hatilah dengan suffix. Itu membuat Anda berpikir bahwa itu menambah kelas tetapi sebenarnya menambahkan apa pun ke akhir kelas saat ini, jadi ruang trik itu menambahkan kelas sendiri, terpisah dari default. Ini adalah salah satu masalah yang saya lihat di beberapa situs web dan custom JS pada menu. Jadi saat membuat modul menu, pastikan untuk menggunakan

" sdt_menu"

3
Jordan Ramstad