8

UI Bootstrap テーマをアプリケーションに追加しましたが、そのほとんどはうまく機能しているように見えますが、UI ダイアログ ボタンをデモのように正しくレンダリングできないようです。ボタンがスタイルされるように、jQuery UIはボタンにクラスを追加していないようです。

Chrome デベロッパーを使用すると、ボタンは次のようにレンダリングされます。

<button type="button" 
   class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" 
   role="button" 
   aria-disabled="false">
      <span class="ui-button-text">Ok</span>
</button>

しかし、ダイアログを作成すると:

$('#dialog').dialog({
   title: 'My Text',
   close: function (event, ui) {
      myfunction();
   },   
   bgiframe: false,
   width: 860,
   height: 500,
   resizable: true,
   modal: true,
   buttons: {
      Cancel: function () {
         $(this).dialog("close");
      } 
   }
});

UI ダイアログ ボタンは次のようにレンダリングされます。

<button type="button">Cancel</button>

クラスは追加されておらず、他のメソッドを実行する必要があるかどうか、または取引が何であるかを教えてくれるものは何も見つかりません。

ありがとう。

-V

編集：申し訳ありませんが、使用しているバージョンを参照するのを忘れていました：

ブートストラップ: 2.2.2 jQuery: 1.8.3 jQuery UI: 1.9.2

4

3 に答える 3

19

私はこれを自分で解決しました。

それは単に私のjavascriptファイルの順序でした。

jquery.ui をロードする前に、必ず bootstrap.js をロードしてください。

これを行うと、UI によってネイティブに適用されたすべてのボタン クラスが正しく表示されました。

貢献してくれたみんなに感謝します。

-V

于 2012-12-11T02:02:39.820 に答える
13

これは、ブートストラップのbutton（）関数がJquery UIのbutton（）関数と競合するためです。詳細については、このバグを参照してください：https ://github.com/twitter/bootstrap/issues/6094

jqueryuiの後にbootstrap.jsをロードする場合は、これを使用して、bootstrapのbutton（）関数を邪魔にならないように移動できます。

var btn = $.fn.button.noConflict(); // reverts $.fn.button to jqueryui btn
$.fn.btn = btn; // assigns bootstrap button functionality to $.fn.btn

または、jqueryuiダイアログの代わりにブートストラップモーダルを使用することもできます。

于 2013-02-20T03:56:52.037 に答える
0

これを js/html ファイル $('button').button(); に追加する必要がある場合があります。すべてのボタンがテーマに従ってレンダリングされるようにします。

于 2012-12-10T22:14:07.827 に答える