Проблема с использованием Prototype и jQuery на одной странице - PullRequest
0 голосов
/ 08 июня 2011

У меня конфликт, когда я использую скрипт jquery для встроенного окна и прототип для переключения меню.Когда я использую один из двух работает правильно.Однако, когда я использую их обоих, работает только прототип.Я читал о jquery.noconflict, но я могу использовать его правильно.Это скрипты.

вот мой скрипт jquery (встроенное окно)

<script type="text/javascript">

$(document).ready(function(){

    //When you click on a link with class of poplight and the href starts with a # 
    $('a.poplight[href^=#]').click(function() {
        var popID = $(this).attr('rel'); //Get Popup Name
        var popURL = $(this).attr('href'); //Get Popup href to define size

        //Pull Query & Variables from href URL
        var query= popURL.split('?');
        var dim= query[1].split('&');
        var popWidth = dim[0].split('=')[1]; //Gets the first query string value

        //Fade in the Popup and add close button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');

        //Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;

        //Apply Margin to Popup
        $('#' + popID).css({ 
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });

        //Fade in Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 

        return false;
    });


    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        $('#fade , .popup_block').fadeOut(function() {
            $('#fade, a.close').remove();  
    }); //fade them both out

        return false;
    });


});

</script>

, а это мой скрипт-прототип

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>  

<script type="text/javascript">  
// <![CDATA[  
// Making sure this code only executes when the document is loaded: this makes the DOM available to us  
Event.observe(document, 'dom:loaded', function() {  

    // for every element with an toggler class...  
    $$('.toggleExample').each(function(element) {  

        // we put on an event listener of the click type  
        Event.observe(element, 'click', function(event){   

            // We stop the default link behaviour  
            Event.stop(event);  

            // when clicked, traverse the DOM: 1 step up (from it's A-element to it's container DIV-element),   
            // and select its following sibling (next(0)), and toggle that shit.  
            Event.element(event).up(0).next(0).toggle();  

        }, false);  

    });  

});  
// ]]>  
</script>  

Ответы [ 3 ]

5 голосов
/ 08 июня 2011

Поместите это сразу после встроенного jquery.js:

<script  type="text/javascript">
$.noConflict();
</script>

И измените эту строку:

$(document).ready(function(){

на

jQuery(document).ready(function($){
2 голосов
/ 08 июня 2011

1.- Загрузить библиотеку jQuery. 2.- Делать ваши вещи JQuery 3.- Загрузить библиотеку прототипов 4.- Сделай свой прототип вещи

Вы должны использовать функцию noConflict в jQuery, ваши вещи в jQuery должны начинаться следующим образом:

<script type="text/javascript">
jQuery.noConflict();
jQuery(function($){

    //All my jQuery stuff

});
</script>

Если вам нужна дополнительная информация, проверьте API jQuery http://api.jquery.com/jQuery.noConflict/

2 голосов
/ 08 июня 2011

Сначала загрузите jQuery, а затем позвоните

jQuery.noConflict(); 
//if loaded first, you could also use $.noConflict(), 
//but consistency is a good thing

Затем продолжите загрузку оставшихся вещей (включая Prototype, пользовательские скрипты и т. Д.).

Наконец (и это относится к вашему первому примеру выше) используйте функцию jQuery, где вы обычно используете $.


Ваша основная проблема в том, что $ используется как Prototype, так и jQuery в качестве ссылки на другую функцию. К сожалению, Prototype более или менее требует своего определения $, что означает, что после его загрузки ничто другое не должно называть себя $. Метод jQuery noConflict избавляет от метода $ для предотвращения этой проблемы.

...