一起使用不同版本的jQuery和jQueryUI

时间:2010-11-18 12:06:31

标签: jquery jquery-ui

我正在开发一个项目,他们的框架使用jQuery 1.3.2和jQueryUI 1.7.2。

升级框架中的版本是不可能的,所以我想并行运行jQuery 1.4.4和jQueryUI 1.8.5。

我已经看到不同版本的jQuery可以并行使用,如下所示:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
    <script type="text/javascript">
        var j$132 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
        var j$144 = $.noConflict(true);
    </script>

但这也适用于以下情况:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        var j$132 = $.noConflict(true);
    </script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var j$144 = $.noConflict(true);
    </script>

3 个答案:

答案 0 :(得分:12)

AFAIK,jQuery UI没有$.noConflict()等价物。但是,您可以使用jQuery UI的本地副本,并使用与用于别名不同库的类似技巧包装整个JS:

(function(jQuery) {
  // ... the jQuery UI lib code for jQuery 1.3.2
})(j$132);

使用服务器端构建脚本或为JS文件提供服务但使用上述代码包装内容的处理程序可以优雅地实现这一点。

没有测试过这种方法,所以你可能不得不摆弄函数参数(尽管我认为可以安全地假设它使用jQuery来引用插件代码中的jQuery)。

你使用它的方式是声明jQuery的两个版本:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
    var j$132 = $.noConflict(true);
</script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
    var j$144 = $.noConflict(true);
</script>

...然后包含您的UI代码,如上所述。

不,在引用Google CDN的UI JS文件时,你不能这样做。

编辑:问题中的第二个代码块实际上是一个比这个答案更好的解决方案,因为它不需要将原始UI代码包装在自执行函数中并传递特定版本。这两种方法都会在页面上产生完全相同的状态。

答案 1 :(得分:1)

我到了这个页面是因为我遇到了与原问题中描述的相同的问题,但给出的答案并没有完全解决它(

我需要使用jquery为一个包含大量现有代码的页面添加一个自动建议,没有简单的方法来更新到新的jquery和jquery ui所以试图使用旧版本旁边的新版本

除了编辑jqueryui最后一行之外,jquery ui还有很多需要更改的jQuery引用,所以我使用了一个可以使用正则表达式替换的编辑器并替换: \ bjQuery \ b 同 Ĵ$ 182

我在页面中添加了:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script type="text/javascript">
        var j$182 = $.noConflict(true);
        </script>
<script type="text/javascript" src="jqueryui1.9.0.js"></script>

现在页面上的现有脚本和新的自动建议都正常工作。

答案 2 :(得分:0)

我只想找到一个解决方案,它对我有用。

在Jquery库中,在最后一行之后输入

var mySelector = $;

在您的页面中包含其他版本后,请添加其他版本。

现在,在你想要使用这个jquery版本的所有脚本中(甚至是jquery ui和其他库),用mySelector替换$。使用replaceall,会有几个地方,比如正则表达式匹配函数,你想要将mySelector替换回$。这个问题困扰了我很长一段时间。它刚刚解决了。

EDITTED:确保你不要在jQuery原始脚本中替换任何$。