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

xhh*_*xhh 6 jquery-ui

我使用以下代码显示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');
Run Code Online (Sandbox Code Playgroud)

但是,按钮没有样式.我注意到为按钮生成的HTML是:

<div class="ui-dialog-buttonset">
    <button>Yes</button>
    <button>Cancel</button>
</div>
Run Code Online (Sandbox Code Playgroud)

从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>
Run Code Online (Sandbox Code Playgroud)

即缺少CSS样式.你知道为什么吗?

小智 5

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


Joc*_*hem 0

也许是因为 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 也具有按钮脚本:http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js 有所有的用户界面元素。 (2认同)