JQuery vs Prototype – konflikt

Kiedy chcesz na swojej stronie jednocześnie użyć JQuery oraz Prototype (np. Lightbox) spotyka Cię niemiła niespodzianka.

Biblioteki te “gryzą” się ze sobą. Przy załączeniu do kodu obydwu, działała będzie tylko jedna z nich.

Problemem jest używanie przez obydwie biblioteki $ jako nazwy funkcji.

Rozwiązanie problemu jest bardzo proste.

1. Includujemy najpierw Prototype

<script type="text/javascript" src="prototype.js"></script>

2. Includujemy JQuery

<script type="text/javascript" src="jquery.js"></script>

3. Załączmy plik z biblioteką JQuery którą chcemy użyć, w tym przypadku jest to JQuery slide

<script type="text/javascript" src="jquery.slide.js"></script>

4. Następnie edytujemy plik  jquery.slide.js. Na początku kodu dodajemy

var j = jQuery.noConflict();

5. Wszystkie funkcje $() i zmienne $ zmieniamy odpowiednio na  j() i j

W powyższym przykładzie będzie to wyglądało następująco:

$.fn.infiniteCarousel = function() {

zmieniamy na

j.fn.infiniteCarousel = function() {

Dalej

var $wrapper = $(’> div’, this).css(’overflow’, ‘hidden’),

zmieniamy na

var $wrapper = j(’> div’, this).css(’overflow’, ‘hidden’),

itd.

Po wprowadzeniu zmian we wszystkich nazwach, które powodowały konflikt, skrypty powinny działać jednocześnie bez żadnych problemów.

1. Includujemy najpierw prototype

Wpisany pod kategorią Bez kategorii, JavaScript · Tagowany przez , , , , , ,

Wyraź siebie

Napisz co Ty myślisz...
ooo i, jeśli chcesz fotkę widoczną z komentarzem, idź looknij na gravatar!

Musisz być zalogowany aby pisać komentarze.