Javascript 更改jQueryUI对话标题

我有一把小提琴，我试图更改jquery UI对话标题。当我使用jquery 1.9或更低版本时，它工作正常，但当我转到更高的库时，它只直接显示HTML。我在这里做错了什么吗。我使用的是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;
});

打开对话框
有些人到这里来了

$（“#包装器”）。对话框({
自动打开：错误，
身高：400，
最小宽度：600，
标题：功能（）{
返回“Testing testingthehtml。”；
}
});
$（'#opener'）。单击（函数（）{
$（'包装器'）。对话框（'打开'）；
返回false；
});

---

感谢

在jQuery UI 1.10中，他们更改了

标题

选项，以便它使用

.text（）

而不是

.html（）

来设置对话框标题：

从jQuery UI 1.10：

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

（）通过内容元素上的

title

选项或

title

属性控制对话框标题。该标题以前被设置为HTML，但由于标题通常是纯文本，这很容易导致未意识到该值被设置为HTML的用户出现脚本漏洞。因此，标题现在设置为文本。如果需要向对话框标题添加自定义格式，可以覆盖对话框上的

\u title（）

方法

因此，要恢复到原始行为，可以根据jQuery UI团队的建议执行以下操作：

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

---

（demo at）

正如其他人所说，jQueryUI的新版本不使用HTML

但是，看起来您只是想让文本变小。为什么不使用CSS执行此操作：

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

---

只要

title

选项从html改为文本，您就可以在jQuery UI对话框窗口标题中调整small hack以面对html内容

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

在创建对话框并手动更改title.html时触发函数

$（'#包装器'）。对话框({
自动打开：错误，
身高：400，
最小宽度：600，
创建：函数（）{
$（'包装器'）.prev（）.html（$（'包装器'）.prev（）.text（））；
},
标题：功能（）{
返回“Testing testingthehtml。”；
}
});
$（“#开场白”）。单击（函数（）{
$（'包装器'）。对话框（'打开'）；
返回false；
});

---

这里是fiddle:

在jQuery1.10中，标题现在是纯文本。您必须重写对话框的_title（）方法来设置HTML。另外，我很惊讶它接受了一个函数，我从未尝试过。@ScottMermelstein谢谢你的链接-如果你不介意的话，我会在我的文章中引用它answer@ScottMermelstein另外，从源代码看，“接受函数”似乎没有被记录，但它是将给定选项直接传递给

.text

的副作用，它确实接受一个函数。@alnitak整洁的副作用，感谢您真正深入到源代码中。我正在尝试使文本的一部分变小。此代码与其中的硬编码ID不可靠。两个改进建议：与其使用

ui-ID-1

，不如使用

$（“#包装器”）。prev（）

-这似乎没有那么硬编码。另外，create函数可以是

$（'#ui-id-1'）.html（$（'#ui-id-1'）.text（））

（当然也可以使用

$（'#wrapper'）.prev（）

），所以只需要设置一次。@Scottmerelstein完全同意您的看法。刚刚更新了我的答案。谢谢你的建议。@ScottMermelstein实际上我会选择

$（这个）。最近的（'.ui dialog'）。查找（'.ui dialog title'）

@Alnitak是的，它可以有很多变化来获得最佳方式，但主要思想是找到另一种获得HTML标题的方式。我并不是说你错了，我只是说这只是玩DOM的问题，除此之外，这是一个全局修复，它将使

title

在所有对话框中按预期的方式工作，而另一个答案只针对添加的任何对话框。而且，这个答案根本不需要任何DOM解析，并且最直接地解决了这个问题。（不过，两者都是问题的解决方案。）

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

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