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文件中 $（ '按钮'）按钮（）。这样每个按钮都应该根据你的主题进行渲染。

jQuery UI Bootstrap对话框中未添加按钮类

3 个答案: