Scriptaculous的和JQuery不合作

我使用jQuery滑塊在同一頁上瀏覽圖像和Scriptaculous滑塊動畫。如果我把兩個單獨的頁面放在一起，它們會很好地工作Scriptaculous的和JQuery不合作

當我爲了這樣的代碼。

<script type="text/javascript" src="/scripts/prototype.js"></script>  
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>    
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){  
     jQuery('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    });    
</script>

Scriptaculous幻燈片工作和jQuery幻燈片停止工作。當我點這種方式。

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){  
     jQuery('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    });    
</script> 

<script type="text/javascript" src="/scripts/prototype.js"></script>  
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>    
<script type="text/javascript" src="/scripts/lightbox.js"></script>

jQuery開始工作，Scriptaculous幻燈片停止工作。然後我尋找一些解決方案，並聲明使用jQuery.noConflict（）;並用jQuery替換選擇器$可以解決這個問題，但事實並非如此。我把這兩樣東西放在代碼中，然後嘗試這種方式。

script type="text/javascript" src="/scripts/prototype.js"></script>  
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>    
<script type="text/javascript" src="/scripts/lightbox.js"></script> 

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script> 

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function(){  
     jQuery('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    });    
</script>

這隻會迫使jQuery工作，不管它的順序如何，它使Scriptaculous停止工作。

這裏有任何建議。乾杯。

來源

2011-04-28 Jonas T

滑塊插件的行爲是否使用'$'？ – alex 2011-04-28 04:49:33

好點。如果有的話，我會嘗試在該插件上進行搜索和替換。你有任何錯誤？ – Blender 2011-04-28 04:53:52

不是。我已經用「jQuery」替換了所有的「$」。 – 2011-04-28 05:15:29

我不這麼好Scriptaculous的精通，但只有兩個了蝙蝠的事情：

如果你打算使用jQuery與其他庫（然後調用.noConflict()），負荷的jQuery第一個，然後調用.noConflict(),然後加載其他庫。在這種情況下，原型和scriptaculous。這樣更安全，如果我沒有弄錯的話。
確保jQuery的尾聲滑塊插件實際上支持.noConflict()。我想這就是德里克以上想說的---一旦你叫.noConflict()，jQuery的釋放$變量回到打開（對於Scriptaculous的使用，例如）。如果結尾滑動使用$變量（不適用於.noConflict()），那可能是一個大問題。

來源

2011-04-28 05:42:40

你可能不會得到這個工作，Scriptaculous的依賴於原型，以做的事情。

你最好的選擇是找到您使用的是Scriptaculous效果jQuery的兼容替代品。

來源

2011-04-28 04:55:28

我無法找到Scriptaculous thumbmail滑塊的相似功能，它可以將5幅圖像的寬度爲20的圖像放入一個盒子中。 – 2011-04-28 05:20:29

我認爲這看起來很酷，但需要做一些改變才能滿足我的要求。謝謝丹。 http://www.gcmingati.net/wordpress/wp-content/lab/jquery/svwt/ – 2011-04-28 05:57:38

jquery.coda滑塊-2.0.js取決於$，你需要在文件更新到$任何引用是jQuery，並繼續使用noConflict（）

試試這個：

<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="/scripts/coda-slider-2.0/jquery.coda-slider-2.0.js"></script> 

<script type="text/javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function(){  
     jQuery('#coda-slider-1').codaSlider({ 
     dynamicArrows: false, 
     dynamicTabs: false 
    }); 
    });    
</script> 

<script type="text/javascript" src="/scripts/prototype.js"></script>  
<script type="text/javascript" src="/scripts/scriptaculous.js?load=effects"></script>    
<script type="text/javascript" src="/scripts/lightbox.js"></script>

隨着this file爲jquery.coda滑塊，2.0.js

如果這不起作用，你可能會想要麼報廢jQuery和找到類似的插件原型，反之亦然。如果你只使用燈箱的原型，jQuery也提供了一個不錯的lightbox插件。

來源

2011-04-28 05:00:02 Derek

即使我用「jQuery」替換「$」，jQuery結尾滑塊仍然可以工作。我不能讓他們一起工作。 – 2011-04-28 05:21:40

檢查原來的答案，希望這有助於 – Derek 2011-04-28 05:51:15

這樣jQuery工作和Scriptaculous燈箱停止woring。 :( – 2011-04-28 06:14:43

jQuery和Prototype都使用$選擇器。 noConflict（）應該解決這個衝突，但如果不是，你可以在你的文檔中找到$符號並用document.getElementById替換它們。

來源

2012-04-01 08:41:04 codelove

這只是擴展Richard Neil Ilagan的第2點（我完全同意）。爲了在noConflict模式下使用jQuery的工作，所有的插件應該是一般形式爲：

jQuery(function() { 
    (function($) { 
     $.fn.codaSlider = function() { 
      // Plugin's code goes here.  
      // Within this function, $ refers to jQuery. 
     }; 
    })(jQuery); 
});

外功能大幹快上的頁面加載執行，並得到進入jQuery的不使用「$」（因此是安全的反對Prototype）。內部自執行函數僅僅是爲了創建一個$引用jQuery的範圍。在SEF內部，$是指jQuery，正如無法支持noConflict的樸素插件所期望的那樣。所以這樣一個插件的代碼通常可以被複制到上面SEF的主體中，並且它將會正常工作（tm）。

這優於將'$'的所有實例更改爲'jQuery'，因爲它不會更改正則表達式中的'$'字符等，並且保留原始代碼除縮進之外保持不變，因此未來更容易合併變化。

HTH

來源

2013-02-07 00:32:07 AnotherSmellyGeek

Scriptaculous的和JQuery不合作

回答

相關問題