javascript - jQuery UI 对话框标题中的图标

Question

我正在使用下面的代码创建一个 jQuery 对话框。默认情况下，标题栏上有一个关闭图标，但我想在标题栏中添加一些其他图标，以实现不同的功能。

对话框使用的代码是:

$("document").ready(function () {
    $("#dialog").dialog({
        title: "Dialog Title",
        height: 400,
        width: 500
    });
});

我正在使用以下 .css 和 .js 文件:

<link type="text/css" href="jquery-ui-1.7.3.custom.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.3.custom.min.js"></script>

Answer 1

您可以在创建对话框时在title 选项中定义HTML。因此，使用现有的 jQuery UI 图标 Sprite ，我们可以使用这个 Javascript:

---

对于 jQuery UI 1.10.0

根据 Bug #6016，您需要覆盖未记录的 _title 函数以确保 title 属性未被转义。

var dialog = $("#dialog").dialog();

dialog.data( "uiDialog" )._title = function(title) {
    title.html( this.options.title );
};

dialog.dialog('option', 'title', '<span class="ui-icon ui-icon-home"></span> Example Dialog');

对于旧版本

$("#dialog").dialog({
    title: '<span class="ui-icon ui-icon-home"></span> Example Dialog'
});

---

还有这个 CSS

.ui-dialog .ui-dialog-title .ui-icon {
    float: left;
    margin-right: 4px;
}

将图标添加到对话框的标题。您可以在此处查看完整的 jQuery UI 图标集:http://jqueryui.com/themeroller/

要实时查看此工作，请参阅:http://jsfiddle.net/XkSu9/ (jQuery UI 1.10+) 或 http://www.jsfiddle.net/yijiang/UYMJH/ (旧版本)