jQuery 與 Prototype 共存方法

最近為了要使用兩種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 程式碼)

 


留言

粗體斜體刪除線連結引用圖片程式碼

注意:您的電子信箱將不會被公開,且網站連結不會被搜尋引擎採計