通过单击带有jQuery UI选项卡的+按钮复制最后一个选项卡

Question

我需要创建一个标签页，用户可以点击标签/按钮复制最后一个标签，如下图所示：

在这种情况下，您点击加号，TAB 3将使用与TAB 2相同的内容创建。

我想知道最好的方法是什么？

编辑：

这是一个JSFiddle（一定要先跑一步）和我目前的代码。它几乎就在那里，但是如果你的标签名称有一个空格，它不会因为某些原因而欺骗最后一个子HTML。

Answer 1

最好手动生成id而不是直接使用用户输入来生成id，因为它应该是唯一的，它不能包含空格等。

我们可以将标签的标题设置为用户输入，同时在场景后面生成唯一的id。

我已使用jquery clone()方法更新了您的代码，如下所示：

＆＃13;

＆＃13;

$(function() {
  var $tabs = $("#tabs").tabs(),
    $dialog = $("#new_tab_dialog").dialog({
      autoOpen: false,
      height: 200,
      width: 350,
      modal: true,
      buttons: {
        "Create a new tab": function() {
          $dialog.dialog("close");
          var tid = parseInt($(".tab").last().attr("id").replace("tab", "")) + 1,
            li = $("<li/>").insertBefore("#list li:last");
          $("<a/>", {
            text: $("#new_tab_input").val(),
            href: "#tab" + tid
          }).appendTo(li);
          $("#tabs div.tab:last").clone().attr("id", "tab" + tid).appendTo("#tabs");
          $tabs.tabs("refresh").tabs("option", "active", -2);
          alert(tid);
        },
        Cancel: function() {
          $dialog.dialog("close");
        }
      },
      open: function() {
        $("#new_tab_input").val("");
      }
    });

  $("#create_tab").click(function() {
    $dialog.dialog("open");
  });
});

＆＃13;

input.text {
  margin-bottom: 12px;
  width: 95%;
  padding: .4em;
}

＆＃13;

<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="tabs">
  <ul id="list">
    <li><a href="#tab1">Tab 1</a>

    </li>
    <li><a href="#tab2">Tab 2</a>

    </li>
    <li><a href="#new_tab_dialog" id="create_tab">+</a>
    </li>
  </ul>
  <div id="tab1" class="tab">
    <p>Tab 1 content.</p>
  </div>
  <div id="tab2" class="tab">
    <p>Tab 2 content.</p>
    <p>When you click the plus it should create a new tab (and corresponding div) by duplicating the last child in the list.</p>
  </div>
</div>
<div id="new_tab_dialog" title="Duplicate the last tab">
  <input type="text" id="new_tab_input" class="text ui-widget-content ui-corner-all" placeholder="Enter new tab name" />
</div>

＆＃13;

＆＃13;

＆＃13;

附注：我已为内容<div>提供了一个公共类名，以便轻松获取id $(".tab").last().attr("id")，而不是从$("#tabs").find("li:last").prev().find("a").attr("href")获取标签看起来像#

P.S：即使为标签的锚点指定了id，看起来jquery ui仍在尝试获取内容。我已经给了它{{1}}对话而不是满足那个可怜的东西。