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

【问题标题】：Duplicating last tab by clicking + button with jQuery UI Tabs通过单击带有 jQuery UI 选项卡的 + 按钮来复制最后一个选项卡
【发布时间】：2014-11-22 19:43:58
【问题描述】：

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

在这种情况下，您将单击加号并创建TAB 3，其内容与TAB 2 相同。

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

编辑：

这里有一个JSFiddle（一定要先点击运行），其中包含我到目前为止的代码。它几乎就在那里，但如果您的选项卡名称有空格，它不会出于某种原因欺骗最后一个子 html。

【问题讨论】：

分享基本的样板代码和 css 将极大地帮助那些试图帮助你的人。
在我的大脑融化之前，这是我能做到的。它几乎就在那里，但是如果您的选项卡名称有空格，则由于某种原因它不会欺骗最后一个子 html。（一定要先跑）jsfiddle.net/kirkbross/w3jysnr8/3
因为id 应该是唯一的并且不能包含空格...我添加了一个答案...顺便说一句，如果您将newTab 函数移动到.ready()处理程序...
我已经更新了答案以使用一些缓存...如果需要，您可以从修订历史记录中找到 newTab() 在 ready() 之外的旧答案...
谢谢TJ。很有帮助...

标签： jquery jquery-ui tabs jquery-ui-tabs

【解决方案1】：

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

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

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

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

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

<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>

旁注：我为内容<div> 提供了一个通用类名，以便轻松获取id，如$(".tab").last().attr("id")，而不是从类似于$("#tabs").find("li:last").prev().find("a").attr("href") 的选项卡中获取它。 /p>

P.S：看起来 jquery ui 会继续尝试获取内容，即使为选项卡的锚指定了 #。我给了它对话框的id 来满足这个可怜的东西。

【讨论】：