Question

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

Answer 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回调中注入自己的代码或元素。

将jQuery UI对话框标题栏HTML从跨度更改为H2

1 个答案: