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图标精灵,我们可以使用这个Javascript:

对于jQuery UI 1.10.0

您需要覆盖未记录的_title函数,根据Bug#6016确保该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/(旧版本)

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');
            }
        });
    });