Question

我有这个小提琴http://jsfiddle.net/cdG94/2/，其中我试图更改jquery UI对话标题。当我使用Jquery 1.9或更低版本时工作正常但是当我去更高的库时它只是直接显示HTML ..am我在这里做错了。我正在使用Jquery 1.10.2和jQuery UI - v1.10.3

<button id="opener">Open the dialog</button>
<div id="wrapper">
<p>Some txt goes here</p>
</div>

$('#wrapper').dialog({
    autoOpen: false,
    minHeight: 400,
    minWidth: 600,
    title: function () {
                   return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
               }
});
$('#opener').click(function() {
    $('#wrapper').dialog('open');
    return false;
});

由于

Answer 1

在jQuery UI 1.10中，他们更改了title选项，以便使用.text()代替.html()来设置对话框的标题：

来自jQuery UI 1.10 release notes：

将标题选项从HTML更改为文字

（#6016）对话标题可以通过内容元素上的title选项或title属性进行控制。该标题以前被设置为HTML，但由于标题通常是纯文本，因此很容易导致脚本漏洞，因为没有意识到该值被设置为HTML的用户。因此，标题现在设置为文本。如果需要在对话框标题中添加自定义格式，可以在对话框中覆盖_title()方法。

要恢复原来的行为，你可以这样做，按照jQuery UI团队的建议：

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

但要注意（如果你允许用户提供的输入出现在标题中）XSS漏洞的可能性，这是改变的原始原因！

（http://jsfiddle.net/alnitak/bJ47w/演示）

Answer 2

至于title选项从html更改为文本，您可以调整小hack以在jQuery UI对话框窗口标题中面对html内容。

这不是最佳做法，但有时可能是一种解决方案。这是一个例子：

在创建对话框并手动更改标题时触发一个功能.html

$('#wrapper').dialog({
    autoOpen: false,
    minHeight: 400,
    minWidth: 600,
    create: function () {
        $('#wrapper').prev().html($('#wrapper').prev().text());
    },
    title: function () {
        return "Testing&nbsp<span style=\"font-size:smaller;\">Testing the HTML .</span>";
    }
});
$('#opener').click(function () {
    $('#wrapper').dialog('open');
    return false;
});

这是小提琴：http://jsfiddle.net/zur4ik/cdG94/8/

Answer 3

正如其他人所说，较新版本的JQuery UI不使用HTML。

然而，看起来你只是想让文字更小。为什么不使用CSS：

.ui-dialog-title{
    font-size: smaller !important;
}

改变jquery ui对话标题

3 个答案: