Javascript jQuery UI对话框标题中的图标

我正在使用下面的代码创建一个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>

---

创建对话框时，可以在

标题

选项中定义HTML。因此，使用现有的jQuery UI图标精灵，我们可以使用以下Javascript：

---

对于jQueryUI1.10.0 您需要根据重写未记录的

\u 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');

将图标添加到对话框标题。您可以在此处看到完整的jQuery UI图标集：

---

要查看此功能，请参阅：（jQueryUI1.10+）或（旧版本）

您可以在打开对话框时向标题栏添加一些HTML代码

$("document").ready(function () {
        $("#dialog").dialog({
            title: "Dialog Title",
            height: 400,
            width: 500,
            open: function(event, ui){
                $(this).parent().find('.ui-dialog-titlebar').append('Some HTML');
            }
        });
    });

我是这样做的：

<script type="text/javascript" language="javascript">
    function MsgBox() {
        var arg = arguments;
        /*
        [arg]
        0 = message
        1 = title
        2 = width
        3 = height
        4 = command to evaluete if Ok is clicked (optional)
        */
        $("body").append("<div id=\"dlgMsg\" title=\"" + arg[1] + "\">" + arg[0] + "</div>");
        $("#dlgMsg").dialog({
            autoOpen: false,
            modal: true,
            bgiframe: true,
            width: arg[2],
            height: arg[3],
            close: function (event, ui) { $(this).dialog("destroy").remove(); },
            buttons:{ 
                    'OK': function () { if (arg[4]) eval(arg[4]); $(this).dialog("close"); }
                    }
        });

        $("#dlgMsg").dialog('open');
        return false;
    }
</script>

函数MsgBox（）{
var arg=参数；
/*
[arg]
0=消息
1=标题
2=宽度
3=高度
4=单击“确定”时评估值的命令（可选）
*/
$（“body”）.append（“+arg[0]+”）；
$（“#dlgMsg”）。对话框({
自动打开：错误，
莫代尔：是的，
bgiframe：是的，
宽度：arg[2]，
高度：arg[3]，
关闭：函数（事件，ui）{$（this）.dialog（“destroy”）.remove（）；}，
按钮：{
“OK”：函数（）{if（arg[4]）eval（arg[4]）；$（this.dialog（“close”）；}
}
});
$（“#dlgMsg”）.dialog（'open'）；
返回false；
}

用法：

MsgBox（“你好，我是一个MessageBox！”，“这里的标题”，400200）

或

MsgBox（“你好，我是一个MessageBox！”，“这里的标题”，400200，“提醒（'嘿，你点击了Ok！'）”

您还可以使用ui图标来改进它…
这是一种更简单的方法。在样式表中：

.ui-dialog .ui-dialog-title {
  background-image: url('/icons/info.png');
  background-repeat: no-repeat;
  padding-left: 20px;
}

这是针对16x16图像的。
以下是全局解决jQuery UI 1.10.0对话框标题问题的方法，而不是一次解决一个对象：

jQuery.widget('ui.dialog', jQuery.extend({}, jQuery.ui.dialog.prototype, {
    _title: function(titleBar) {
        titleBar.html(this.options.title || ' ');
    }
}));

现在像往常一样使用对话框小部件，您的标题将不再转义。
这在jqueryui-1.10.0中不起作用。它将转义html。@YoniBaciu这很有趣，因为文档中仍然说任何有效的html都可以用作标题：。让我检查这是否是一个bug，或者文档是否过期。此处所做的更改是为了“防止XSS漏洞”，修复此bug：。不幸的是，开发人员似乎未能正确更新文档。jQueryUI V1.10.2运行良好，感谢您提供的见解。注意：如我所示，如果将代码段封装在函数中，您可以简化您的生活。对于jQuery UI 1.10.x，您可以通过覆盖
$.UI.dialog.prototype.\u title
和答案函数来全局应用此行为。
.ui-dialog .ui-dialog-title {
  background-image: url('/icons/info.png');
  background-repeat: no-repeat;
  padding-left: 20px;
}

jQuery.widget('ui.dialog', jQuery.extend({}, jQuery.ui.dialog.prototype, {
    _title: function(titleBar) {
        titleBar.html(this.options.title || ' ');
    }
}));