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

Question

我使用以下代码来使用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样式丢失。 你知道为什么吗？

- xhh

---

你是否已经插入了jQuery UI样式表？通常是类似于jquery.ui.all.css这样的东西。 - subosito

@alifity 是的，我错过了 Button JS 脚本 :) - xhh

Answer 1

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

- Oleksandr V. Kukliuk

Answer 2

可能是因为缺少CSS文件吗？你真的包含它们了吗？然后使用firebug或httpfox查看是否有404错误...

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

- Jochem

---

除此之外，我建议确保您的jquery-ui.js也具有按钮脚本：http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js拥有所有UI元素。 - WSkid

@WSkid 你说得对！非常感谢！我想这是因为我在下载 jQuery UI 自定义 JS 时没有选择“Button”小部件。当使用你提到的 Google Ajax lib 中的 jQuery UI JS 时，它可以工作。 - xhh