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>

- solipps

Answer 1

当创建对话框时，您可以在title选项中定义HTML。因此，使用现有的jQuery UI图标精灵，我们可以使用此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/（旧版本）

- Yi Jiang

---

这在jqueryui-1.10.0中不起作用。它会转义HTML。 - Yoni Baciu

@YoniBaciu 这很有趣，因为文档仍然说任何有效的HTML都可以用作标题：http://api.jqueryui.com/dialog/#option-title。让我检查一下这是一个错误还是文档已过时。 - Yi Jiang

更改已在此处进行 https://github.com/jquery/jquery-ui/commit/7e9060c109b928769a664dbcc2c17bd21231b6f3，以“防止XSS漏洞”，修复此错误：http://bugs.jqueryui.com/ticket/6016。不幸的是，开发人员似乎未能适当地更新文档。 - Yi Jiang

它与jQueryUI V1.10.2正常工作，感谢您提供的见解。请注意，如果您将代码片段封装在函数中，可以简化您的生活，就像我在这里展示的那样（http://stackoverflow.com/a/15567411/1016343）。 - Matt

对于 jQuery UI 1.10.x，您可以通过使用答案的函数覆盖 $.ui.dialog.prototype._title 来全局应用此行为。 - Fabrício Matté

Answer 2

当打开对话框时，您可以通过向标题栏添加一些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');
            }
        });
    });

- Minh Nguyen

Answer 3

一个更为简单的方法。在样式表中：

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

这是一张16x16像素的图片。

- Rob

Answer 4

以下是解决jQuery UI 1.10.0对话框标题全局问题的方法，而不是逐个对象解决：

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

现在像往常一样使用对话框小部件，您的标题将不再被转义。

- Zectbumo

Answer 5

我是这样做的：

<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("你好，我是一个消息框！", "标题在这里", 400, 200);

或者

MsgBox("你好，我是一个消息框！", "标题在这里", 400, 200, "alert('嘿，你点了确认按钮！')");

您还可以使用ui-icons来改进它...

- Youkko