JQuery Tools选项卡与JQuery UI冲突

我正在使用JQuery工具的选项卡function，同时我使用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与其他库（Tools | Prototype | 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 Tools（它包含我们在站点中使用的tabsfunction。）我们首先导入jQuery UI，然后执行fixup，然后导入jQuery Tools。

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 { /// 
 /// Good Bundling resource, succinctly highlighting a range of ways to use this feature: /// http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification /// 
 ///  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标签function的名称。 从：

  （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注释不相关。

您需要重新定义选项卡function（从任一库中），因为加载了一个并且在加载下一个之前。

首先加载jQuery库和jQueryTools …

然后重新定义选项卡function…

然后你加载jQueryUI库...

当然，这个解决方案归功于Carl G，但我认为将无效的noConflict解决方案与制表function的加载顺序/重新定义区分开来是很重要的。