Конфликт Bootstrap и jQueryUI

Я пытаюсь использовать tooltip в представлении, которое имеет ссылку на оба jQueryUI и Bootstrap 3. Я сделал образец здесь. Если я загружу Boostrap после js jQueryUI, то tooltip() вызов успешен, но если я вызываю jQueryUI после начальной загрузки, я получаю ошибку, и ничего не работает. Вы можете попробовать сами. Об этом много говорят в интернете, и я спросил вокруг GitHub, но я еще не мог найти решение.

14
css javascript jquery jquery-ui twitter-bootstrap-3

2 ответов

идеальным решением будет взять QueryUI без подсказки. Это сработает. Если вы не хотите этого делать, включите Bootstrap после JQueryUI. Убедитесь, что у вас есть уникальные компоненты из каждого (вы можете создать обе библиотеки с требуемыми компонентами)

Bootstrap имеет способ сбросить любой компонент, например:

var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton            // give $().bootstrapBtn the Bootstrap functionality

приведенный выше код будет работать при загрузке bootstrap после jQueryUI

Ref: http://getbootstrap.com/javascript/

вот соответствующий код из Bootstrap:

  var old = $.fn.tooltip

  $.fn.tooltip = function (option) {
    ....
  }


  $.fn.tooltip.noConflict = function () {
    $.fn.tooltip = old
    return this
  }
38

вместо jquery-ui.js, включите отдельные библиотеки по мере необходимости и оставьте подсказку jQuery-ui.

например, если все, что вам нужно, это сортировка jQuery-ui, используйте это:

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/jquery-ui/ui/core.js"></script>
<script src="bower_components/jquery-ui/ui/widget.js"></script>
<script src="bower_components/jquery-ui/ui/mouse.js"></script>
<script src="bower_components/jquery-ui/ui/sortable.js"></script>
3