如何从 Jquery 选项卡小部件调用 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 和下拉菜单的设计，您可以随意修改，因为我没有太多时间。

当有许多选项卡超过 window 大小时，将出现下拉菜单。

如何从 Jquery 选项卡小部件调用 Jquery tabdrop() 插件？

How to Call Jquery tabdrop() Plugin from Jquery Tab Widget?

jquery

jquery-ui-tabs