将 jquery UI 对话标题栏 HTML 从 span 更改为 H2
Changing jquery UI dialogue titlebar HTML from span to H2
我正在使用 JQuery UI 对话,它呈现以下 HTML。我想把span标签换成H2标签,有什么办法吗
<div class="ui-dialog-titlebar ui-widget-header">
<span class="ui-dialog-title" id="ui-id-20">
</span>
我正在使用 Jquery UI 1.11
请考虑以下示例,基于https://api.jqueryui.com/1.11/dialog/#entry-examples
$(function() {
$("#dialog").dialog({
autoOpen: false,
create: function(e, ui) {
var w = $(this).dialog("widget");
var t = $(".ui-dialog-title", w);
var h2 = $("<h2>", {
id: t.attr("id"),
class: t.attr("class")
}).html(t.text());
t.replaceWith(h2);
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
请看:
https://api.jqueryui.com/1.11/dialog/#event-create
您可以在 create
回调期间注入您自己的代码或元素。
我正在使用 JQuery UI 对话,它呈现以下 HTML。我想把span标签换成H2标签,有什么办法吗
<div class="ui-dialog-titlebar ui-widget-header">
<span class="ui-dialog-title" id="ui-id-20">
</span>
我正在使用 Jquery UI 1.11
请考虑以下示例,基于https://api.jqueryui.com/1.11/dialog/#entry-examples
$(function() {
$("#dialog").dialog({
autoOpen: false,
create: function(e, ui) {
var w = $(this).dialog("widget");
var t = $(".ui-dialog-title", w);
var h2 = $("<h2>", {
id: t.attr("id"),
class: t.attr("class")
}).html(t.text());
t.replaceWith(h2);
}
});
$("#opener").click(function() {
$("#dialog").dialog("open");
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button id="opener">open the dialog</button>
<div id="dialog" title="Dialog Title">I'm a dialog</div>
请看:
https://api.jqueryui.com/1.11/dialog/#event-create
您可以在 create
回调期间注入您自己的代码或元素。