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样式。你知道为什么吗？

Answer 1

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

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" />

jQueryUI对话框 - 没有为按钮生成样式

2 个答案: