10

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

如果我同时包含两个 JS 库，则带有选项卡的 Jquery 工具将不起作用。

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

提前致谢。

4

6 回答 6

7

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

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

像这样：

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

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

于 2011-01-05T03:38:28.203 回答
5

您可以在此网址http://jqueryui.com/download中构建自己的 jquery UI

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

在此处输入图像描述

于 2012-03-15T17:43:35.800 回答
5

有一个更简单的方法。每当您将 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。

于 2011-01-18T22:39:58.013 回答
3

我们的解决方案是包含完整的 jQuery UI 和 jQuery Tools 库，但要插入一个小的 javascript 修复程序来重命名 jQuery UI tabs，这样它就不会干扰 jQuery Tools（它包含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"));
            ...
        }
    }
}
于 2012-11-26T18:55:41.113 回答
1

就我而言，我更改了 jquerytools 选项卡函数的名称。从：

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

至：

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

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

于 2012-08-06T03:41:50.167 回答
1

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

您需要在加载一个时和加载下一个之前重新定义 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>

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

<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 解决方案和选项卡功能的加载顺序/重新定义是很重要的。

于 2013-09-10T16:05:56.967 回答