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

您可以在此网址http://jqueryui.com/download

中构建自己的jquery UI

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

enter image description here

Answer 4

我们的解决方案是包含完整的jQuery UI和jQuery Tools库，但是插入一个小的javascript修复程序，重命名jQuery UI的tabs，这样它就不会干扰jQuery Tools（包含tabs我们在网站上使用的功能。）我们首先导入jQuery UI，然后执行修复，然后导入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
    {
        /// <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注释不相关。

您需要重新定义标签功能（从任一库中），因为加载了一个，然后加载下一个。

首先加载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>

然后重新定义标签功能......

<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解决方案与制表符功能的加载顺序/重新定义区分开来非常重要。

JQuery Tools选项卡与JQuery UI冲突

6 个答案:

的jquery-UI-jquerytools-tabsconflictfix.js：

App_Start \ BundleConfig.cs