Icons in jQuery UI dialog title

Question

I'm using the code below to create a jQuery dialog box. By default there is a close icon on title bar, but I want to add some of the other icons in title bar as well for different functionality.

The code used for the dialog box is:

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

I'm using following .css and .js files:

<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

You can define HTML in the title option when creating the dialog box. Therefore, using the existing jQuery UI icon sprites, we can use this Javascript:

---

For jQuery UI 1.10.0

You need to override the undocumented _title function, according to Bug #6016 to ensure that the title attribute is not escaped.

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

For older versions

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

---

And this CSS

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

To add an icon to the title of the dialog. You can see the complete set of jQuery UI icons here: http://jqueryui.com/themeroller/

To see this working, live, see: http://jsfiddle.net/XkSu9/ (jQuery UI 1.10+) or http://www.jsfiddle.net/yijiang/UYMJH/ (old version)

Answer 2

You can do that by adding some HTML code to title bar when dialog opened.

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