在jQuery UI 1.10中的Dialog标题中使用HTML

Question

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

Answer 1

这将覆盖设置jQuery UI对话框标题时使用的函数,允许它包含HTML.

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

Answer 2

如果你犹豫覆盖jQuery的_title方法,你可以在jQuery对话框的open事件的title元素上使用html,append或类似的方法,如下所示:

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

以上解析了HTML,同时绕过了jQuery的title方法.由于它发生在公开活动中,用户体验仍然是无缝的.刚刚在一个项目中做到这一点,它工作得很漂亮.