JQuery Tools tabs conflicts with JQuery UI

I'm using JQuery tools' tabs feature and at the same time I us开发者_如何学编程e 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.

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.

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.

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

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

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.

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.