最近為了要使用兩種Library的功能，卻因互相衝突而頭痛

 

解決之後來分享一下心得~

 

[more]

jQuery與Prototype的Framework不需做更改

 

我們要更改的目標為執行jQuery的程式碼

 

首先，在程式碼最前面加上『  jQuery.noConflict(); 』

 

接著使用『  jQuery(document).ready(function($){ 原程式碼 }); 』包夾原程式碼

 

如此一來，jQuery就會使用 jQuery 代替 $ 作為處理時的變數

 

 

 

實作(example)

---

 

 

原碼(before)

 

$(document).ready(function(){ 
	$("a#fb").fancybox({         
		'opacity': true,        
		'transitionIn':'elastic',        
		'transitionOut': 'elastic',       
	 });
 
 
修改後(after)
 
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("a#fb").fancybox({
              'opacity': true,
             'transitionIn':'elastic',
              'transitionOut': 'elastic',
      });
});
 
 
 
JS載入順序

 
先設定讓 jQuery 與其 程式碼 先行載入
 
實作(example)
 

<script type="text/javascript" src="jQuery.js"></script>
(jQuery 框架)

<script type="text/javascript" src="jQuery_code.js"></script>
(jQuery 程式碼)
要先讓jQuery載入完


 
<script type="text/javascript" src="Prototype.js"></script>
(Prototype 框架)
 

<script type="text/javascript" src="Prototype_code.js"></script>
(Prototype 程式碼)