将 jquery UI 对话标题栏 HTML 从 span 更改为 H2

Posted 2023-05-08

【中文标题】将 jquery UI 对话标题栏 HTML 从 span 更改为 H2

【英文标题】：Changing jquery UI dialogue titlebar HTML from span to H2

【发布时间】：2021-01-20 13:00:33

【问题描述】：

我正在使用 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

【问题讨论】：

你有什么理由不能和你的 H2 一样设计？标题样式在这里：api.jqueryui.com/dialog/#option-title。为什么它实际上需要是一个 <h2> 元素？

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

【参考方案1】：

请考虑以下示例，基于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 回调期间注入您自己的代码或元素。