nagradzam tutoriale

  • jquery w towarzystwie

    dodano 25.11.2007 / komentarzy: 0 / autor: palmiak

    Twórcy strony Olimpiada zdrowia poprosili mnie o pomoc w rozwiązaniu pewngo problemu. Otóż zależało im, żeby na stronie równocześnie działały biblioteki jquery oraz prototype.

    Pierwszą rzeczą, którą najpierw zrobiłem było wywiedzenie się po co im te dwie biblioteki. W odpowiedzi usłyszałem, że jquery służy do naprawiania błędów i Internet Explorera (kwestia menu), a prototype, bo musi być Lightbox. Oczywiście najrozsądniej by było albo użyć Thickboxa albo przepisać skrypt do menu, jednak to nie wchodziło w grę. Było trzeba doprowadzić to co jest do działania.

    Okazało się, że twórcy jquery przewidzieli taką sytuację i w ich bibliotece jest furtka, która umożliwia działanie razem z innymi bibliotekami.

    Kod pierwotnie wyglądał:

    $(document).ready(function(){
                    $(‘li.parent2′).hover(function() {
                            $(this).children("ul").addClass(’show1′);
                    }, function() {
                            $(this).children("ul.child").removeClass(’show1′);
                            });

                    $(‘ul ul li’).hover(function() {
                            $(this).children("ul").addClass(’show2′);
                    }, function() {
                            $(this).children("ul").removeClass(’show2′);
                            });
            });

    Żeby doprowadzić go do działania potrzebny nam będzie jQuery.noConflict(); oraz zastąpienie wszystki $ w kodzie słowem jQuery.

    W rezultacie otrzymamy następujący kod:

    jQuery.noConflict();
    jQuery(document).ready(function(){
                    jQuery(‘li.parent2′).hover(function() {
                            jQuery(this).children("ul").addClass(’show1′);
                    }, function() {
                            jQuery(this).children("ul.child").removeClass(’show1′);
                            });

                    jQuery(‘ul ul li’).hover(function() {
                            jQuery(this).children("ul").addClass(’show2′);
                    }, function() {
                            jQuery(this).children("ul").removeClass(’show2′);
                            });
            });

    I dzięki takiemu manewrowi możemy cieszyć z jQuery działającego razem z innymi bibliotekami.

    Napisz komentarz