Вкладки JQuery Tools конфликтуют с JQuery UI - PullRequest
Новая
       35

Вкладки JQuery Tools конфликтуют с JQuery UI

10 голосов
/ 05 января 2011

Я использую функцию вкладок инструментов JQuery и одновременно использую пользовательский интерфейс JQuery.

Если я включаю обе библиотеки JS, инструменты Jquery с вкладками не работают.

Как исправить этот конфликт? Любая помощь приветствуется.

Заранее спасибо.

Ответы [ 6 ]

7 голосов
/ 05 января 2011

Вы можете получить пользовательскую сборку jQuery-ui, которая не включает вкладки, но может позже вызвать некоторую путаницу.ИМХО, лучший подход - отредактировать jQuery-tools tabs.js и изменить строку: 

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

на что-то вроде этого: 

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

Я использовал «fpTabs»для «вкладок flowplayer.org» вы можете использовать любое имя, которое вам подходит.Это должно прояснить ваши конфликты, не вызывая проблем нигде.Конечно, вы должны помнить, что вы изменили tabs.js, если вы когда-нибудь обновитесь, но это должно быть менее хлопотно, чем возиться с файлом jquery-ui.js без вкладок.

5 голосов
/ 15 марта 2012

Вы можете создать свой собственный пользовательский интерфейс jquery по этому адресу http://jqueryui.com/download

выбирайте только те инструменты, которые вам нужны, и не включайте вкладку компонента в параметры, чтобы избежать конфликта с инструментами jquery

enter image description here

5 голосов
/ 19 января 2011

Есть более простой способ. Всякий раз, когда вы используете jquery с другими библиотеками (Tools | Prototype | 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.

3 голосов
/ 26 ноября 2012

Наше решение состоит в том, чтобы включить полные библиотеки jQuery UI и jQuery Tools, но добавить небольшое исправление javascript, которое переименовывает jQuery UI в tabs, чтобы оно не мешало jQuery Tools (которое содержит функцию tabs, которую мы используем в наш сайт.) Сначала мы импортируем пользовательский интерфейс jQuery, затем выполняем исправление, а затем импортируем инструменты 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"));
            ...
        }
    }
}
1 голос
/ 10 сентября 2013

Этот конкретный вопрос касается конфликта между функцией Tabs в jQueryTools и jQueryUI, а не между библиотеками, которые хотят использовать "$", поэтому комментарии 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>

Конечно, спасибо Карлу Дж за это решение, но я подумал, что важно провести различие между решениями noConflict, которые не будут работать, и последовательностью загрузки / переопределением функции tabs.

1 голос
/ 06 августа 2012

в моем случае я меняю имя функции вкладок jquerytools.от: 

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

до: 

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

, поэтому мне не пришлось менять jquery-ui-tools, это полезно, если вы получаете этосценарий из CDN.

...