web-dev-qa-db-ja.com

Bootstrap and jQueryUI Conflict

jQueryUIとBootstrap 3の両方を参照するビューでtooltipを使用しようとしています。サンプルを作成しました ここ 。 jQueryUIのjsの後にBoostrapをロードすると、tooltip()呼び出しは成功しますが、Bootstrapの後にjQueryUIを呼び出すと、エラーが発生し、何も機能しません。インターネット上でこれについて多くの話があり、GitHubについて尋ねましたが、まだ解決策が見つかりませんでした。

javascriptjquerycssjquery-uitwitter-bootstrap-3
17
lbrahim

理想的なソリューションは、ツールチップなしでQueryUIを取ることです。これは動作します。そうしたくない場合は、Bootstrapを含めてください。それぞれに固有のコンポーネントがあることを確認してください（必要なコンポーネントで両方のライブラリをカスタムビルドできます）

ブートストラップには、次のようなコンポーネントをリセットする方法があります。

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

上記のコードは、bootstrapがJQueryUIの後にロードされる場合に機能します

参照： http://getbootstrap.com/javascript/

Bootstrapからの関連コードは次のとおりです。

  var old = $.fn.tooltip

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


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

jquery-ui.jsを含める代わりに、必要に応じて個々のライブラリを含め、jquery-uiツールチップを省略します。

たとえば、jquery-ui sortableだけが必要な場合は、これを使用します。

<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
supersan