Использование HTML в заголовке диалога в jQuery UI 1.10

http://jqueryui.com/upgrade-guide/1.10/#changed-title-option-from-html-to-text

jQuery UI 1.10 сделал так, чтобы заголовок диалога мог быть только текстом (без html), чтобы предотвратить уязвимости в сценариях. Я не разрешаю пользователю вводить этот заголовок, поэтому я все равно хотел бы использовать HTML, в основном для отображения значка слева от заголовка.

Я собираюсь опубликовать свое решение этой проблемы, потому что я еще не видел, чтобы кто-то еще спрашивал или отвечал на это. Надеюсь, это поможет кому-то другому, или кто-то другой может иметь лучший подход.

Дополнительная информация о том, почему они это сделали: http://bugs.jqueryui.com/ticket/6016

Ответ 1

Это приведет к переопределению функции, используемой при настройке заголовков диалогового окна jQuery, что позволяет содержать HTML.

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

Ответ 2

Если вы не решаетесь переопределить метод jQuery _title, вы можете использовать html, append или подобные методы в элементе title в открывшемся диалоговом окне jQuery, например:

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

Вышеописанное правильно анализирует HTML-код, минуя метод заголовка jQuery. И так как это происходит на открытом мероприятии, пользовательский интерфейс остается без изменений. Просто сделал это в проекте, и он работал красиво.