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对话框.