Xung đột JQuery với một thư viện JQuery khác

Question

Tôi sử dụng jquery cho một mô-đun. Mẫu Joomla của tôi có một menu jquery tích hợp. Vì vậy, họ xung đột với nhau.

Có cách nào để giải quyết vấn đề này không. Sau mã kịch bản của các mô-đun

<script type="text/javascript" charset="utf-8"> 
    window.onload = function() { 
     var container = jQuery('div.sliderGallery'); 
     var ul = jQuery('ul', container); 

     var itemsWidth = ul.innerWidth() - container.outerWidth(); 

     jQuery('.slider', container).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1},340); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }; 
</script> 

Answer 1

thử

var J = jQuery.noConflict(); 

sau đó biến sử dụng J thay vì $ hoặc jQuery cho mã tùy chỉnh của bạn

Answer 2

thử

jQuery.noConflict(); 

ví dụ

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 
     var container = jQuery('div.sliderGallery'); 
     var ul = jQuery('ul', container); 

     var itemsWidth = ul.innerWidth() - container.outerWidth(); 
     jQuery.noConflict(); 
     jQuery('.slider', container).slider({ 
      min: 0, 
      max: itemsWidth, 
      handle: '.handle', 
      stop: function (event, ui) { 
       ul.animate({'left' : ui.value * -1},340); 
      }, 
      slide: function (event, ui) { 
       ul.css('left', ui.value * -1); 
      } 
     }); 
    }); 
</script> 

Tôi đã cập nhật mã của bạn để sử dụng jQuery để kiểm tra xem tài liệu đã được tải chưa. Chi tiết để sử dụng hàm noConflict là here.

Answer 3

Những gì bạn cần làm để khắc phục vấn đề của bạn là bỏ bí danh hàm jQuery và gán nó cho một tên biến khác (nhớ: các biến có thể là hàm). Bạn cần sử dụng hàm jQuery.noConflict() để bỏ bí danh hàm $(). Dưới đây là một người làm việc đó:

// ...after all of Joomla's JS is done executing... 

// before loading your version of jQuery var jquery = {}; // aka new Object() 
jquery.joomla = jQuery.noConflict(); // moves jQuery into another namespace 

// load your version 

Bây giờ, khi bạn tải phiên bản của bạn, nó sẽ tiến hành jQuery và $ không gian tên, nhưng bạn vẫn sẽ có tài liệu tham khảo khác để chức năng jQuery Joomla nếu bạn cần nó. Để tái lặp, dòng chảy cơ bản là:

1. tải Joomla của jQuery đang
2. của Run Joomla jQuery phụ thuộc vào
3. Move Joomla jQuery vào một namespace
4. Tải jQuery của bạn
5. Execute mã của bạn sử dụng $()

Answer 4

bạn có nghĩa là joomla của bạn đã tải 2 loại jquery cùng một lúc không? 1st load menu của bạn jquery và sau đó tải jquery mô-đun của bạn?

đây là giải pháp: Trong joomla template, chúng ta có thể ghi đè lên các quan điểm mô-đun hoặc một thành phần

1. trong các mẫu của bạn tạo ra một thư mục gọi là (tôi giả sử bạn phải sử dụng Joomla 1.5.x phải không?) html/ ví dụ: mẫu/yourTemplate/html/

2. sao chép tệp từ mô-đun/mod_yourMenu/tmpl /.* vào mẫu html của bạn (templates/yourTemplate/html/mod_yourMenu /) -> * bạn không cần phải thêm tmpl/*

3. chỉnh sửa tệp php bên trong và xóa tất cả các thẻ tải jquery

4. thực hiện bước 1-3 cho mô-đun sử dụng jquery.

5. chỉnh sửa mẫu của bạn, đặt thẻ để tải phiên bản mới nhất của jquery.

nó nên làm việc bây giờ :)

Answer 5

Chỉ cần quấn kịch bản JQ của bạn trong một chức năng tự gọi.

(function($){ 
    $(document).ready(function(){ 

     $('div').click(function(){ alert('ding'); }); 

    }); 
})(jQuery); 

Điều này tạo ra phạm vi riêng tư để bạn không phải lo lắng về mọi va chạm. Bạn có thể bỏ qua tất cả sự khó chịu với jQuery.noConflict(); giải pháp và bạn không phải từ bỏ điều tuyệt vời đó! Tôi làm điều này như là một vấn đề của habbit khi tôi biết có những đoạn mã khác trong công việc (ví dụ, bất kỳ cms) - ngay cả khi một phần mở rộng mới được thêm vào sau khi thử nghiệm của tôi, nó không nên phá vỡ jQuery của tôi.

Có tổng quan về jQuery Cookbook (http://listic.ru/jQuery_Cookbook.pdf - chương 1.17). Nếu nó đủ tốt cho Resig, tôi đoán nó sẽ làm việc cho tôi!