Using HTML in a Dialog's title in jQuery UI 1.10

This will override the function used when setting jQuery UI dialog titles, allowing it to contain HTML.

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
    _title: function(title) {
        if (!this.options.title ) {
            title.html(" ");
        } else {
            title.html(this.options.title);
        }
    }
}));

If you hesitate to override jQuery's _title method, you can use the html, append, or similar methods on the title element at the jQuery dialog's open event, like so:

$("#element").dialog({
  open: function() {
    $(this).find("span.ui-dialog-title").append("<span class='title'>" + subtitle + "</span>");
  }
});

The above parses the HTML correctly while bypassing jQuery's title method. And since it happens at the open event, the user experience remains seamless. Just did this on a project, and it worked beautifully.

Tags:

Jquery Ui

Recent Posts