Всплывающие подсказки jQueryUI конкурируют с Twitter Bootstrap

Мне удалось получить несколько подсказок, чтобы наконец-то работать со следующим кодом:

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

а затем

<script>
    $('[rel=tooltip]').tooltip();
</script>

Проблема, с которой я сталкиваюсь, заключается в том, что она использует всплывающие подсказки jQueryUI (без стрелок, большие уродливые всплывающие подсказки) вместо загрузочных.

Что мне нужно сделать, чтобы использовать всплывающие подсказки Bootstrap вместо jQueryUI?

117 голосов | спросил markdotnet 6 ThuEurope/Moscow2012-12-06T00:00:45+04:00Europe/Moscow12bEurope/MoscowThu, 06 Dec 2012 00:00:45 +0400 2012, 00:00:45

10 ответов


0

JQuery UI и Bootstrap используют tooltip для имени плагина. Используйте $.widget.bridge, чтобы создать другое имя для версии пользовательского интерфейса jQuery и разрешить плагину Bootstrap оставаться в виде всплывающей подсказки (при попытке использовать noConflict в виджете Bootstrap просто приводит к большому количеству ошибок, потому что он не работает должным образом; об этой проблеме сообщалось здесь ):

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

Итак, код, чтобы заставить его работать:

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

Отличный код копирования-вставки, который также обрабатывает конфликт кнопок:

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>
ответил The Demz 8 +04002013-10-08T16:40:13+04:00312013bEurope/MoscowTue, 08 Oct 2013 16:40:13 +0400 2013, 16:40:13
0

Простое решение - загрузить bootrap.js после jquery-ui.js, чтобы метод начальной загрузки .tooltip имел преимущество.

ответил Stefan Musarra 21 +04002014-10-21T03:18:54+04:00312014bEurope/MoscowTue, 21 Oct 2014 03:18:54 +0400 2014, 03:18:54
0

Это сработало для меня:

Если вам нужно использовать JQuery-UI, но вы хотите использовать всплывающую подсказку начальной загрузки, просто получите настроенную версию JQuery-UI с этого веб-сайта .

Просто снимите флажок «Подсказка» и загрузите его (это будет что-то вроде «jquery-ui-1.10.4.custom.js»).

Просто добавьте его в свой проект вместо версии, которую вы сейчас используете, и вы готовы к вечеринке. Это позволит избежать конфликта. Это сработало как шарм для меня!

ответил Poncho 28 FebruaryEurope/MoscowbFri, 28 Feb 2014 09:46:17 +0400000000amFri, 28 Feb 2014 09:46:17 +040014 2014, 09:46:17
0

Предполагается, что пользовательский интерфейс будет вызываться после инициализации начальной загрузки

Сохраните функцию начальной загрузки непосредственно перед инициализацией пользовательского интерфейса

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

Затем назовите его следующим образом

$('.targetClass').bstooltip();
ответил Projesh Pal 9 J0000006Europe/Moscow 2016, 15:34:25
0

В случае, если вы должны загрузить jquery-ui.js после bootstrap.js вот как это сделать:

 <script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

Это переопределит подсказку jquery-ui и всегда будет использовать начальные загрузчики.

ответил supersan 5 AM00000010000002231 2016, 01:12:22
0

Мне кажется, что это решение хорошо работает.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
ответил Jon Stevens 4 J0000006Europe/Moscow 2013, 07:25:25
0

Как насчет просто использовать всплывающие окна Bootstrap? Всплывающие окна BS не создают один и тот же конфликт, хотя им требуется один и тот же компонент tooltip.js. Да, они более стилизованы, но не заставляют мои кнопки JQuery UI работать неправильно.

Я использую пользовательский интерфейс Jquery только для пользовательских автозаполнений /комбинированных списков (поэтому не могу утверждать, что другие элементы управления JQ-UI в порядке), и ни одно из вышеперечисленных действий не помогло исправить проблему с CSS на кнопках комбинированного списка, которые стали "неустановленными" при вызове BS Tooltips. Переключение на BS Popovers обеспечило, по сути, тот же эффект без конфликтов, без переупорядочения импорта моего скрипта и без необходимости использования явных операторов моста.

ответил AgonyOfVictory 17 TueEurope/Moscow2013-12-17T13:41:37+04:00Europe/Moscow12bEurope/MoscowTue, 17 Dec 2013 13:41:37 +0400 2013, 13:41:37
0

Существует простое и хорошее решение, просто переставьте ссылку на файл начальной загрузки и jquery ui следующим образом:

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

Просто загрузите jQueryui перед загрузкой js-файла boostrap. Это работа для меня.

ответил Sanjib Debnath 22 PM00000050000000931 2017, 17:01:09
0

попробуйте использовать jQuery.noConflict () и посмотрите, поможет ли это вам вообще. Похоже, что bootstrap и jQuery используют одно и то же пространство имен, и, возможно, всплывающие подсказки bootstrap и jQuery загружаются в одну и ту же функцию или одна загружается первой.

Вы также можете проверить, какая библиотека загружается первой. Обычно, если вы объявляете одну и ту же функцию дважды в javascript, используется вторая.

В-третьих, проверьте пакет jQueryUI ( на их веб-сайте) и посмотрите, можно ли загрузить версию, которая работает не включены подсказки (я проверил, и это вполне выполнимо).

ответил Matt 6 ThuEurope/Moscow2012-12-06T00:15:03+04:00Europe/Moscow12bEurope/MoscowThu, 06 Dec 2012 00:15:03 +0400 2012, 00:15:03
0

Самый простой способ - загрузить bootstrap.js после jquery-ui.js, чтобы загрузчик .tooltip переопределял пользовательский интерфейс jquery. Если вы используете загрузчик модулей, такой как requirejs, то вы можете сделать загрузчик зависимым от jquery-ui, как таковой:

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...
ответил Andrew 1 J000000Saturday17 2017, 02:14:17

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132