JQuery 工具选项卡与 JQuery UI 冲突

Question

我正在使用 JQuery 工具的选项卡功能，同时我使用 JQuery UI。

如果我同时包含这两个 JS 库，带有标签的 Jquery 工具将不起作用。

如何解决这个冲突？任何帮助表示赞赏。

提前致谢。

Answer 1

您可以获得一个不包含选项卡的自定义 jQuery-ui 构建，但这可能会在以后引起一些混乱。恕我直言，更好的方法是编辑 jQuery-tools tabs.js 并更改此行：

$.fn.tabs = function(query, conf) {

到这样的事情：

$.fn.fpTabs = function(query, conf) {

我将“fpTabs”用于“flowplayer.org 选项卡”，您可以使用任何适合您的名称。这应该可以消除您的冲突，而不会在其他任何地方造成问题。当然，您必须记住，如果您升级了tabs.js，那么这应该比使用无标签的jquery-ui.js 文件更麻烦。

Answer 2

有一个更简单的方法。每当您将 jquery 与其他库（工具 | 原型 | MooTools | 等）一起使用时，您都可以使用特殊的 noConflict 函数将 $ 重新分配给另一个变量。例如：

var $j = jQuery.noConflict();    // assign the main jQuery object to $j
$j("#tabs-container").tabs();    // use $j as you would normally use $

或者你可以更明确地使用 jQuery.someFunction() 而不是 $.someFunction。

Answer 3

你可以在这个 url http://jqueryui.com/download 中构建自己的 jquery UI

只选择你需要的工具，不要在选项中包含组件TAB以避免与jquery工具冲突

Answer 4

我们的解决方案是包含完整的 jQuery UI 和 jQuery Tools 库，但是插入一个小的 javascript 修复，重命名 jQuery UI 的 tabs，这样它就不会干扰 jQuery 工具（其中包含我们使用的 tabs 功能我们的网站。）我们首先导入 jQuery UI，然后执行修复，然后导入 jQuery 工具。

jquery-ui-jquerytools-tabsconflictfix.js:

// Both jQuery UI and jQuery Tools define a tabs function on jQuery objects.
// We use both libraries (jQuery Tools for its non-restricting tabs function and overlay; jQuery UI for autocomplete.)
// To avoid a conflict over tabs, rename the jQuery UI tabs.  Call this code after loading jQuery UI but before
//  calling jQuery Tools.
var oldTabs = $.fn.tabs;
delete $.fn.tabs;
$.fn.jQueryUiTabs = oldTabs;

最好这样设置，这样其他程序员就不太可能意外地避免它。我们处于 ASP.NET MVC 4 环境中，因此我们创建了一个脚本包，它会自动按正确顺序包含脚本：

App_Start\BundleConfig.cs

namespace OurWebApp
{
    public class BundleConfig
    {
        /// <summary>
        /// Good Bundling resource, succinctly highlighting a range of ways to use this feature:
        /// http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
        /// </summary>
        /// <param name="bundles"></param>
        public static void RegisterBundles(BundleCollection bundles)
        {
            ...
            bundles.Add(new ScriptBundle("~/js/jquery-ui-and-tools").Include(
                "~/Scripts/jquery-ui-1.9.2.min.js",
                // Both jQuery UI and jQuery Tools define .tabs on jQuery objects.  We use
                // jQuery Tools' version, and this fix renames jQuery UI's version to get it out of the way.
                // So the load order must be: jQuery UI, the fix, and then jQuery Tools
                "~/Scripts/jquery-ui-jquerytools-tabsconflictfix.js",
                "~/Scripts/jquery-tools-1.2.7.min.js"));
            ...
        }
    }
}

Answer 5

在我的例子中，我更改了 jquerytools 选项卡函数的名称。 来自：

 (e.initialIndex)}a.fn.tabs=function(b,c){

到：

(e.initialIndex)}a.fn.tooltabs=function(b,c){

所以我不必更改 jquery-ui-tools，如果您从 CDN 获取此脚本，这很有用。

Answer 6

这个具体的问题是关于 jQueryTools 和 jQueryUI 中的 Tabs 函数之间的冲突，而不是两者都希望使用“$”的库之间的冲突，因此 noConflict cmets 不相关。

您需要重新定义 tabs 函数（来自任一库），因为加载了一个，然后再加载了下一个。

首先你加载你的 jQuery 库和 jQueryTools...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.7/all/jquery.tools.min.js"></script>

那你重新定义tabs函数...

<script type="text/javascript">
var oldTabs = $.fn.tabs;
delete $.fn.tabs;
$.fn.jTabs = oldTabs;

jQuery(document).ready(function($){
    $("ul.tabs").jTabs("div.panes > div");}
);

然后你加载 jQueryUI 库...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

当然，此解决方案归功于 Carl G，但我认为区分不起作用的 noConflict 解决方案和选项卡功能的加载顺序/重新定义是很重要的。