Javascript 无法读取属性'；用户界面'；未定义的手动修改

我安装了这个特殊的js插件，它可以让你模拟一些类似chrome的标签界面，支持标签的拖动、关闭和打开。

不幸的是，我在安装后遇到了一些问题，它一直打印在控制台上

Cannot read property 'ui' of undefined

事实证明，这是因为我在jquery.ui加载到Dom之前加载了tab ui脚本，所以我将所有tab ui脚本复制粘贴到jquery ui加载之后加载的脚本

因此，选项卡的拖动功能终于起作用了。但仍然缺少正确的打开和关闭功能。（尝试单击live站点选项卡下方的按钮）

任何人都可以看看这个特殊的脚本，看看是否有我可以手动修改脚本在我的网站上工作

---

这是一个实时站点：

将此添加为一个模糊的答案，与关于添加选项卡的评论相关。这与原来的问题并不完全相关

正如我提到的，在第115行的

ui.tabs.overflowResize

中有一个bug：

var id = $( "<div>"+content+"</div>" ).appendTo( this.element.children(':last-child') ).uniqueId().attr('id');

这会抓取

div

并将其解救，并将其附加到目标对象。您可以在此处看到完整的工作示例：

JQUERY用户界面

function addTab(obj, t, c) {
  // Fixes .tabs("add") bug
  // obj = Target Object
  // t = Tab Title
  // c = Tab Content
  $(obj).tabs("add", t, c);
  var h = $(".addTab").prev().find("a").attr("href");
  $(h).clone().appendTo(obj);
  $(h).remove();
}

$(function() {
  $(".tabpanel").tabs({
      closable: true,
      addTab: true
    }).tabs('overflowResize')
    .find(".ui-tabs-nav").sortable({
      distance: 10
    });
  $(".addTab a").on("click", function(e) {
    $("#dialog").dialog("open");
    return false;
  });
  $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      Add: function() {
        addTab($(".tabpanel"), $("#tab_title").val(), $("#tab_content").val());
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      $("#dialog form")[0].reset();
    }
  });
  $("#dialog form").submit(function(e) {
    addTab($(".tabpanel"), $("#tab_title").val(), $("#tab_content").val());
    $("#dialog").dialog("close");
    e.preventDefault();
  });
});

其中大部分内容是改编自

编辑

从演示示例中，我遗漏了一个小符号。这没有记录，但作者建议添加一个额外的

div

，如下所示：

<div class="tabpanel">
  <ul>
    <li><a href="#tabs-1" class="closable">Nunc tincidunt</a></li>
  </ul>
  <div class="ui-layout-content">
    <div id="tabs-1">
    </div>
  </div>
</div>

---

您可以在此处看到这一点：

在此处发布您的代码，以便我们可以评估欢迎使用stackoverflow。你可以阅读这两篇文章，然后用正确的文本编辑问题：| |@MarcosPérezGude，但是如果没有代码发布呢？我的意思是，如果你是说我必须发布所有描述插件整个功能的js脚本，那么需要粘贴页面。你能更具体地说明我需要做什么吗？提供一个工作示例很容易。但这必须是最低限度的。读一读：它解释得很好，比我在评论中解释你要好。如果最容易重现问题，则需要提供代码片段或JSFIDLE。不管有多少行代码，我们都无法用水晶球看到您的代码。请注意，您增加了2票来结束此主题，这意味着有更多的人有相同的观点。酷！。我仍然是jquery的初学者。你能告诉我在哪里可以申请你的小费吗？我在直播网站jquery.ui.datepicker.js中的原始ui js脚本之后放了上面的脚本：发现它不起作用。你像流星一样进来，像绿洲一样解渴。我对你的到来感激不尽。感谢您提供的示例。@您可以将其添加到从索引页第93行开始的脚本块中。您还需要在该脚本块之前添加各种插件。但是，如果我想在内容中添加html元素（如某些内容），而没有每次单击“新建选项卡”按钮时都会出现的提示窗口，您会让我怎么做？你能给我一个提示吗？@MarkKang我建议你在GitHub上查看“文档”，或者在这里问一个新问题。

<div class="tabpanel">
  <ul>
    <li><a href="#tabs-1" class="closable">Nunc tincidunt</a></li>
  </ul>
  <div class="ui-layout-content">
    <div id="tabs-1">
    </div>
  </div>
</div>