在同一页面同时使用Prototype和jQuery的问题

当我使用内联窗口的jquery脚本和原型来为菜单创建一个菜单时，我遇到了冲突。当我使用其中一个正常工作。但是，当我使用它们时，只有原型有效。我阅读了jquery.noconflict，但我可以正确使用它。这些是脚本。在同一页面同时使用Prototype和jQuery的问题

这里是我的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>

来源

2011-06-07 EnexoOnoma

如果是我的，我会将原型菜单切换函数转换为jQuery并完成它。 – Sparky 2011-06-07 22:50:42

这是一个工作，但我已经建立。如果我没有得到解决方案，我会努力的。 – EnexoOnoma 2011-06-07 22:52:21

维护一个库，减少冲突，减少JS代码的加载等等。当你这样做的时候，你会更开心。 – Sparky 2011-06-07 22:55:34

将这个权嵌入式的jquery.js后：

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

并更改此行：

$(document).ready(function(){

到

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

来源

2011-06-07 22:44:22

O_o ...所以'$（document）.ready'中的$现在将被Prototype解释？ Prototype是否会按预期处理它？ – 2011-06-07 22:54:40

不，使用$ .noConflict（）时，全局变量$指向jQuery将被丢弃，所以$可以被另一个库使用。 document.ready（）中的函数总是会提供一个参数，jQuery本身，所以使用$上面的代码将成为一个局部变量。请注意编辑，有一个错误，它必须是'jQuery（document）'而不是'$（document）' – 2011-06-07 23:06:57

您好，我试过了，没有任何结果。 – EnexoOnoma 2011-06-07 23:17:28

第一负荷的jQuery，然后调用

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

然后继续加载你的东西（包括原型，自定义脚本等）休息。

最后（这与上面的第一个示例有关）使用通常使用$的函数jQuery。

你的基本问题是Prototype和jQuery都使用$作为另一个函数的引用。不幸的是，Prototype或多或少需要它的$定义，这意味着一旦它被加载，没有别的应该命名自己$。 jQuery的noConflict方法摆脱了$方法来防止这个问题。

来源

2011-06-07 22:44:42 cwallenpoole

您好，它没有任何差别...... – EnexoOnoma 2011-06-07 23:17:46

1.-加载jQuery库。 2：做你的jQuery的东西 3.-装载Prototype库 4.-做你的原型东西

您应该使用jQuery的的noConflict功能，您的jQuery的东西应该开始是这样的：

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

    //All my jQuery stuff 

}); 
</script>

如果您需要更多信息，请查看jQuery API http://api.jquery.com/jQuery.noConflict/

来源

2011-06-07 22:45:03 Grekz

我不能让它工作... – EnexoOnoma 2011-06-07 23:17:17

在同一页面同时使用Prototype和jQuery的问题

回答

相关问题