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

这是因为 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 对话框。

于 2013-02-20T03:56:52.037 回答
0

您可能需要将此添加到您的 js/html 文件 $('button').button(); 这样每个按钮都应该根据您的主题呈现。

于 2012-12-10T22:14:07.827 回答