如何从Jquery Tab小部件调用Jquery tabdrop（）插件？

Question

就像这个Jquery Plugin一样，我有一个jquery标签，我希望它能够像插件一样通过将超出的标签到屏幕宽度分组到下拉列表中来表现插件的作用。

在我的fiddle示例代码中，我尝试调用此插件，但我的选项卡仍未移入下拉组。

$(function() {
  var tabTitle = $("#tab_title"),
    tabContent = $("#tab_content"),
    tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
    tabCounter = 2;

  var tabs = $("#tabs").tabs();
  // Modal dialog init: custom buttons and a "close" callback resetting the form inside
  var dialog = $("#dialog").dialog({
    autoOpen: false,
    modal: true,
    buttons: {
      Add: function() {
        addTab();
        $(this).dialog("close");
      },
      Cancel: function() {
        $(this).dialog("close");
      }
    },
    close: function() {
      form[0].reset();
    }
  });

  // AddTab form: calls addTab function on submit and closes the dialog
  var form = dialog.find("form").on("submit", function(event) {
    addTab();
    dialog.dialog("close");
    event.preventDefault();
  });

  // Actual addTab function: adds new tab using the input from the form above
  function addTab() {
    var label = tabTitle.val() || "Tab " + tabCounter,
      id = "tabs-" + tabCounter,
      li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
      tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";

    tabs.find(".ui-tabs-nav").append(li);
    tabs.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
    tabs.tabs("refresh");
    tabCounter++;
  }

  // AddTab button: just opens the dialog
  $("#add_tab")
    .button()
    .on("click", function() {
      dialog.dialog("open");
    });

  // Close icon: removing the tab on click
  tabs.on("click", "span.ui-icon-close", function() {
    var panelId = $(this).closest("li").remove().attr("aria-controls");
    $("#" + panelId).remove();
    tabs.tabs("refresh");
  });


  $('#tabs').tabdrop(); // Here Where I Called Plugin TabDrop
});

我无法直接使用此插件，因为我当前的项目使用的是Jquery标签，并且我不希望用户打开许多标签时我的标签落入新行。

因此，如何为当前项目获得该结果？谢谢

Answer 1

好吧，我已经创建了自己的tabdrop，可以在移动设备上运行，还可以检查屏幕尺寸。

看看here，让我知道您的想法

请务必查看函数tabdrop，下拉列表的css和设计，您可以根据自己的需要进行修改，因为我确实没有太多时间。

如果有许多选项卡超出了窗口大小，则会显示该下拉菜单。