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

编辑：对不起，我忘了引用我正在使用的版本：

引导程序：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(); 这样每个按钮都应该根据您的主题呈现。