jQueryUI 对话框 - 未为按钮生成样式答案

【问题标题】：jQueryUI Dialog - style not generated for buttonsjQueryUI 对话框 - 未为按钮生成样式
【发布时间】：2011-05-06 12:54:15
【问题描述】：

我使用以下代码显示一个带有 jQuery UI 的对话框：

var $dialog = $('<div></div>')
.text(msg)
.dialog({
    autoOpen: false,
    height: 140,
    modal: true,
    title: "Confirm",
    buttons: {
        "Yes": function() {
            $(this).dialog('close');
        },
        "Cancel": function() {
            $(this).dialog('close');
        }
    }
});
$dialog.dialog('open');

但是，按钮没有样式。我注意到为按钮生成的 HTML 是：

<div class="ui-dialog-buttonset">
    <button>Yes</button>
    <button>Cancel</button>
</div>

来自 jQuery UI 演示：

<div class="ui-dialog-buttonset">
    <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>
    <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">Cancel</span></button>
</div>

即缺少 CSS 样式。你知道为什么吗？

【问题讨论】：

你插入了 jquery ui 样式表吗？它通常类似于 jquery.ui.all.css。
@alifity 是的，我错过了 Button JS 脚本 :)

标签： jquery-ui

【解决方案1】：

如果你使用 Bootstrap 和 JQueryUI，jquery-ui.js 必须包含在 bootstrap.js 之后。

【讨论】：

【解决方案2】：

也许是因为缺少 CSS 文件？你真的包括他们吗？然后用firebug或者httpfox看看有没有404的地方...

编辑：我包含这样的 jQuery-ui css：<link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />

【讨论】：

除此之外，我建议确保您的 jquery-ui.js 也具有按钮脚本：ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js 具有所有 ui 元素。
@WSkid 你是对的！非常感谢！我猜是因为我在下载 jQuery UI 自定义 JS 时没有选择“Button”小部件。当使用您提到的 Google Ajax lib 中的 jQuery UI JS 时，它可以工作。