it-swarm-tr.com

Javascript Menü çakışmaları

Statik bir web sitesini Joomla 3.3 şablonuna dönüştürüyorum. 1 seviye açılır kutu javascript menü olan bu benim "index.html" dahil işlevdir

 $ (function () {
 /**
 * her menü öğesi için, mouseenter'da, 
 * görüntüyü büyütüyoruz ve hem sdt_active aralığını hem de 
 * sdt_wrap span. Eleman bir alt menüye (sdt_box) sahipse, 
 * sonra kaydırırız - eleman menüdeki son menü ise 
 * kaydırırız sola, aksi takdirde sağa 
 */
 $ ('# sdt_menu> li'). bind ('mouseenter', işlev () {
 var $ elem = $ (this); 
 $ elem.find ('img') 
 .stop (gerçek) 
 .animate ({
 'genişlik': '170 piksel', 
 'height': '170px', 
 'left': '0px' 
}, 400, 'easeOutBack') 
 .andSelf () 
 .find ('. sdt_wrap') 
 .stop (doğru ) 
 .animate ({'top': '140px'}, 500, 'easeOutBack') 
 .andSelf () 
 .find ('. sdt_active') 
 .stop (true) 
 .animate ({'height': '170px'}, 300, işlev () {
 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', işlev () {
 var $ elem = $ (bu); 
 var $ sub_menu = $ elem .find ('. sdt_box'); 
 eğer ($ sub_menu.length) 
 $ sub_menu.hide (). css ('sol', '0px'); 
 
 $ elem.find ('. sdt_active') 
 .stop (doğru) 
 .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); 
}); 
}); 

ve ben kafasına dahil yanı sıra easing.js kullanır.

joomla'nın dizini PHP olduğundan) easing.js'yi aşağıdaki gibi ekledim:

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

ve işlevi main.js'ye kopyalayıp yapıştırdım ve index.php dosyasına yükledim, ancak işe yaramadı.

bu yüzden script index.php içine koymak - o da işe yaramadı ...

Nasıl çalışacağını bilmiyorum. (Menüyü custom-html modülü olarak oluşturdum)

peki ne yapmalıyım ?

2
Elhamy

Tamam Joomla ile bir şey asla jotosu ile çakışmıyor emin olmadan jQuery için $ Karakter kullanın. Joomla bence daha iyiydi ama bence jQuery yerine $ Kullanmak en iyisi. Diğer yollardan çok daha az stresli.

Ayrıca HTML yükleri iyi varsayalım? Javascript yok mu? İşte size yardımcı olacak bazı düşünceler:

$(function () {

Bunu şununla değiştir:

jQuery(document).ready(function(){

Her ikisi de sonunda aynı şeyi yaparlar, ancak .aten "onload" fonksiyonu olarak görmek daha kolaydır ve gerekirse $ Yerine yukarıda belirtildiği gibi daha fazla eklemek daha az kafa karıştırıcı yapar jQuery, mootools uyumluluğuna yardımcı olabilir (Joomla'daki diğer JS kütüphaneleriyle birlikte).

Olmayanları izlemek için herhangi bir hata yoksa console.log Kullanın. Komut dosyası yüklenmiyor mu? İlk işlevin içine console.log('loaded'); gibi bir şey eklemeye çalışın, bu komut dosyalarını yükleyip yüklemediğini size bildirmelidir. Ardından mouseenter olaylarının çağrılıp çağrılmadığını görmek için bunları bağlama olaylarına da ekleyin. Her şey yüklüyse, fonksiyon zincirini bölebilir ve console.log Çıktısını beklediğiniz gibi olup olmadığını görebilirsiniz. Ancak bu en azından bazı Javascript biliyorum nasıl dayanmaktadır, ancak daha net bir cevap vermek için form için de HTML görmek gerekecek.

Aşağıdaki geri kalan orijinal mesajımdır ve normal bir menü modülünü varsayar, bu kadar gelene kadar özel olduğunu görmedim ama başkalarına yardımcı olabileceğinden ayrılacağım.

Menü modülündeki kimliğin doğru ayarlandığından emin olun, tüm kimliklerin/sınıfların da doğru olduğundan emin olmak için menüyü inceleyin.

Bir kök sınıfına ihtiyacınız varsa, son eke dikkat edin. Bir sınıf eklediğini düşünmenizi sağlar, ancak aslında geçerli sınıfın sonuna ne eklerse, bir boşluk onu varsayılandan ayrı olarak kendi sınıfını eklemeye yönlendirir. Bu birkaç web sitesinde ve menüde özel JS gördüm bir sorundur. Bu yüzden menü modülünü oluştururken,

" sdt_menu"

3
Jordan Ramstad