JQuery Tools tabs conflicts with JQuery UI

Question

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.

Answer 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.

Answer 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.

Answer 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