jQuery UI Bootstrap對話框中未添加按鈕類

Question

我已經將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

編輯：抱歉，我忘了引用我正在使用的版本：

Bootstrap：2.2.2 jQuery：1.8.3 jQuery UI：1.9.2

Answer 1

好的我自己解決了這個問題

這只是我的javascript文件的順序。

在加載jquery.ui之前，請務必加載bootstrap.js

一旦我這樣做了ui本地應用的所有按鈕類都正確顯示。

感謝大家的貢獻。

-V

Answer 2

這是因為bootstrap的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對話框。

Answer 3

你可能需要將它添加到你的js / html文件$（'button'）。button（）; 這樣每個按鈕都應該根據你的主題進行渲染。