JQuery Tools tabs conflicts with JQuery UI

问题:

I'm using JQuery tools' tabs feature and at the same time I use JQuery UI.

If I include both JS libraries, Jquery tools with tabs does not work.

How to fix this conflict? Any help is appreciated.

Thanks in advance.

回答1:

You could get a custom jQuery-ui build that that doesn't include the tabs but that might cause some confusion later on. A better approach, IMHO, would be to edit the jQuery-tools tabs.js and change this line:

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

to something like this:

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

I used "fpTabs" for "flowplayer.org tabs", you can use whatever name works for you. That should clear up your conflicts without causing problems anywhere else. Of course, you'd have to remember that you changed tabs.js if you ever upgrade but that should be less troublesome than messing around with a tab-less jquery-ui.js file.

回答2:

There is an easier method. Whenever you use jquery with other libraries (Tools | Prototype | MooTools | etc.) you can use a special noConflict function to re-assign the $ to another variable. For example:

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

Or you can be more explicit and use jQuery.someFunction() instead of $.someFunction.

回答3:

You can build your own jquery UI in this url http://jqueryui.com/download

only pick tools you need and do not include component TAB in the options to avoid conflict with jquery tools

回答4:

Our solution is to include complete jQuery UI and jQuery Tools libraries, but to interject a small javascript fix that renames jQuery UI's tabs so that it does not interfere with jQuery Tools (which contains the tabs feature we use in our site.) We first import jQuery UI, then perform the fixup, and then import 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;

It is preferable to set this up so that other programmers are unlikely to accidentally avoid it. We are in an ASP.NET MVC 4 environment, so we create a script bundle that automatically includes the scripts in the correct order:

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"));
            ...
        }
    }
}

回答5:

in my case i change the name of the jquerytools tabs function. from:

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

to:

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

so i didn't have to change jquery-ui-tools, this is usefull if you are getting this script from CDN.

回答6:

This specific question is about a conflict between the Tabs function in jQueryTools and jQueryUI and not between libraries that both wish to use the "$" and so the noConflict comments are not relevant.

You need to redefine the tabs function (from either library) as one is loaded and before the next is loaded.

First you load your jQuery library and 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>

Then you redefine the tabs function...

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

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

Then you load the jQueryUI library...

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

Of course, credit to Carl G for this solution, but I thought it was important to draw the distinction between the noConflict solutions that will not work and the loading sequence/redefinition of the tabs function.