it-swarm-vi.com

Menu Javascript xung đột

Tôi đang chuyển đổi một trang web tĩnh sang mẫu Joomla 3.3. Có trình đơn javascript hộp thả xuống 1 cấp, đây là chức năng có trong "index.html" của tôi

[.__.] $ (function () {[.__.] /**[.__.] * cho mỗi thành phần menu, trên mouseenter, [.__.] * chúng tôi phóng to hình ảnh và hiển thị cả nhịp sdt_active và [.__.] * sdt_wrap span. Nếu phần tử có menu phụ (sdt_box), [.__.] * thì chúng tôi sẽ trượt nó - nếu phần tử là phần cuối cùng trong menu [.__.] * chúng tôi sẽ trượt nó ở bên trái, nếu không ở bên phải [.__.] */[.__.] $ ('# sdt_menu> li'). bind ('mouseenter', function () {[.__.] var $ elem = $ (này); [.__.] $ elem.find ('img') [.__.] .stop (đúng) [.__.] .animate ({[.__.] 'width': '170px', [.__.] 'height': '170px', [.__.] 'left': '0px' [.__.]}, 400, 'easyOutBack') [.__.] .andSelf () [.___ .] .find ('. sdt_wrap') [.__.] .stop (đúng ) [.__.] .animate ({'top': '140px'}, 500, 'easyOutBack') [.__.] .andSelf () [.__.] .find ('. sdt_active') [.___ .] .stop (đúng) [.__.] .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. leather (). 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 (đúng) [.__.] .animate ({'top': '15px'}, 500); [.___.]}); [.__.]}); [.__.]

và nó sử dụng Easing.js cũng như tôi đã được đưa vào phần đầu.

vì chỉ mục của Joomla nằm trong PHP nên tôi đã bao gồm Easing.js như sau:

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

và tôi đã sao chép và dán hàm vào main.js và tải nó vào tệp index.php của tôi, nhưng nó không hoạt động.

vì vậy, tôi đặt tập lệnh bên trong index.php - nó cũng không hoạt động ...

Tôi không biết làm thế nào để làm cho nó hoạt động. (Tôi đã tạo menu dưới dạng mô-đun tùy chỉnh html)

vậy tôi phải làm sao

2
Elhamy

Ok một điều với Joomla là không bao giờ sử dụng ký tự $ Cho jQuery mà không đảm bảo rằng nó không xung đột với mootools. Joomla đã tốt hơn nhưng tốt nhất là chỉ sử dụng jQuery thay vì $ Theo ý kiến ​​của tôi. Nó ít căng thẳng hơn những cách khác.

Ngoài ra tôi giả sử tải HTML tốt? không có Javascript? Dưới đây là một số suy nghĩ để giúp với điều đó:

$(function () {

Chuyển cái này với

jQuery(document).ready(function(){

Tuy nhiên, cả hai đều làm điều tương tự cuối cùng, mặc dù. Đã dễ dàng hơn để xem là chức năng "onload" và làm cho nó bớt khó hiểu hơn sau đó để thêm nhiều hơn vào nó nếu cần, cũng như đã nêu ở trên thay thế $jQuery có thể giúp tương thích với mootools (cùng với các thư viện JS khác trong Joomla).

Đồng thời sử dụng console.log Nếu không có lỗi để theo dõi những gì không xảy ra. Là kịch bản không tải? Hãy thử bao gồm một cái gì đó như console.log('loaded'); ngay bên trong hàm ban đầu, điều này sẽ cho bạn biết nếu nó đã tải các tập lệnh. Sau đó, thêm chúng vào các sự kiện liên kết để xem các sự kiện mouseenter không được gọi. Nếu tất cả dường như tải thì bạn có thể chia chuỗi chức năng lên và console.log Đầu ra để xem đó có phải là điều bạn mong đợi không. Tuy nhiên, tất cả chỉ dựa trên ít nhất một số Javascript biết cách, tuy nhiên để đưa ra câu trả lời rõ ràng hơn, tôi cũng sẽ cần phải xem HTML cho biểu mẫu.

Phần còn lại bên dưới là bài viết gốc của tôi và giả sử một mô-đun menu bình thường, không thấy rằng đó là tùy chỉnh cho đến khi tôi đi xa đến mức này nhưng tôi sẽ rời khỏi nó vì nó có thể giúp đỡ người khác.

Đảm bảo ID trong mô-đun menu được đặt chính xác, kiểm tra menu để đảm bảo rằng tất cả các lớp/id đều đúng.

Nếu bạn cần một lớp gốc thì hãy cẩn thận với hậu tố. Nó làm cho bạn nghĩ rằng nó thêm một lớp nhưng nó thực sự thêm bất cứ thứ gì vào cuối lớp hiện tại, do đó, một không gian lừa nó thêm lớp riêng của nó, tách biệt với mặc định. Đây là một vấn đề tôi đã thấy trên một vài trang web và tùy chỉnh JS trên menu. Vì vậy, khi tạo mô-đun menu, hãy đảm bảo sử dụng

" sdt_menu"

3
Jordan Ramstad