8

短い

同じページで 2 つのライブラリを使用: jQuery UI と Twitter Bootstrap:

  • ほとんどすべての UI がそれに基づいて構築されているため、jQuery UI は私にとって非常に重要です。
  • ドロップダウン メニュー機能を備えた分割ボタン専用の Twitter ブートストラップ。

さて、問題は、両方のライブラリが互いに競合する同じ名前の関数を持っていることです:

詳細

jQuery UI と Twitter Bootstrap ボタンの機能の競合の例を次に示します。

この Web サイトにアクセスしてください。テーブルのおすすめボタンを押す

ここに画像の説明を入力

jQuery UI モーダル ウィンドウが表示されます。モーダルウィンドウ内でjquery uiコンボボックスを使用しました。問題は、jquery ui コンボボックスのデモに示されているように、下矢印ボタンがないことです。

ここに画像の説明を入力

問題の原因を突き止めようとしました: コンボボックス コードを調べ、.button() を呼び出すと、jqui.js ではなく、bootstrap.min.js に入りました。

ご覧のとおり、2 つの js ライブラリ間の競合の証拠です。

ところで、これはjsFiddleで、ブートストラップなしでうまく機能します。

問題

この競合の問題を解決する方法は複数あります (ウェブサイトの機能に触れずに)ドロップダウン メニュー (Twitter Bootstrap) を使用して分割ボタンとまったく同じ機能を取得する必要があります。

  • 可能であればjQuery-UIで（このようなものですが、ドロップダウンメニューがあります）
  • CSS + HTML のみの else

Twitter Bootstrap を取り除きます。どんな解決策も大歓迎です。私は良い答えに 200 回の担当者を与える準備ができています (報奨金として)。事前にThx

4

5 に答える 5

12

現在のバージョンのブートストラップ (v2.2.2) には、noConflict オプションが追加されました。これを、bootstrap および jquery スクリプト タグの後、button()関数の使用前に挿入するだけです。

<script type='text/javascript'>
    $.fn.bootstrapBtn = $.fn.button.noConflict();
</script>

または、 を使用することもできますが、 が呼び出される$(document).ready(handler)前に置換が行われることを確認する必要があります。button()

そのコード行が実行されるbutton()と、JqueryUI のボタンになり、bootstrapBtn()Bootstrap のバージョンになります。

于 2013-01-22T08:41:17.790 に答える
8

Bootstrap と jQuery UI 関数の間の競合を修正するには、いずれかの名前を変更します。

<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
    $.fn.bsbutton = $.fn.button;
</script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

そして、各関数を自由に呼び出すことができます:

<script type="text/javascript">
    $(".button-one").button()   // jQueryUI button
    $(".button-two").bsbutton()  // Bootstrap button
</script>

この手法は、必要なあらゆる機能に使用できます。

順序を覚えておいてくださいinclude A -> rename A -> include B。

于 2012-09-23T10:51:03.557 に答える
1

Twitter Bootstrap のドロップダウン プラグインのみを使用している場合、.button()プラグインは必要ありません。

カスタマイズ ブートストラップ ページに移動し、すべての jQuery プラグインの選択を解除してから、ドロップダウン プラグインのみを選択します。必要に応じて、CSS の一部を選択解除することもできます。

両方の実装 (Twitter Bootstrap と jQuery UI) が必要な場合は、すべてをファイル内の.buttonような名前に変更できます(または、縮小されていないバージョンでこのセクションを見つけます) - テストされていません。.bsButtonbootstrap-button.js

于 2012-09-23T09:33:21.277 に答える