Question

我正在使用jQuery滑块在同一页面上浏览图像和Scriptaculous滑块动画。如果我把两个单独的页面放在一起，它们就能很好地工作。

当我以这种方式订购代码时。

<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替换selector $可以解决问题，但事实并非如此。我把这两件事放在代码中并尝试这种方式。

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停止工作。

这里有任何建议。欢呼声。

Answer 1

我对Scriptaculous并不是那么精通，但只是两件事：＃/ p>

如果您打算将jQuery与其他库一起使用（然后调用.noConflict()），首先加载jQuery ，然后调用.noConflict()，然后加载其他库。在这种情况下，原型和scriptaculous。更安全的是，如果我没弄错的话。
确保jQuery coda滑块插件实际上支持.noConflict()。我认为这就是Derek上面所说的 - 一旦你调用了.noConflict()，jQuery就会将$变量重新发布到open（例如，用于scriptaculous）。如果coda滑块大量使用$变量（不适应.noConflict()），那可能是个大问题。

Answer 2

你不太可能得到这个工作 - Scriptaculous取决于Prototype做它的事情。

您最好的选择是找到与您正在使用的Scriptaculous效果的jQuery兼容替代品。

Answer 3

jquery.coda-slider-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-slider-2.0.js

如果这不起作用，您可能想要废弃jQuery并为原型找到类似的插件，反之亦然。如果您只使用灯箱原型，jQuery也提供了一个不错的lightbox插件。

Answer 4

jQuery和Prototype都使用$ selector。 noConflict（）应该解决这个冲突，但如果不是，你可以在文档中找到$符号并用document.getElementById替换它们

Answer 5

这只是在理查德尼尔伊拉根的第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主体中，并且它将是Just Work（tm）。

这比将'$'的所有实例更改为'jQuery'要好，因为它不会更改正则表达式中的'$'字符等，并使原始代码与缩进保持不变，因此在将来的更改中更容易合并

HTH

scriptaculous和JQuery不合作

5 个答案: