代码之家  ›  专栏  ›  技术社区  ›  Houy Narun

如何从jquery tab小部件调用jquery tabdrop()插件?

  •  0
  • Houy Narun  · 技术社区  · 7 年前

    就这样 Jquery Plugin ,我有一个jquery选项卡,我希望它的行为方式与插件一样,当它达到屏幕宽度时,将任何超出的选项卡分组到下拉列表中。

    example of jquery tabdrop

    在我的 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选项卡,我不希望我的选项卡在用户打开许多选项卡时掉到新行。

    因此,我如何才能在当前的项目中实现这一结果?谢谢

    1 回复  |  直到 7 年前
        1
  •  1
  •   Alen.Toma    7 年前

    好吧,我自己创造了 tabdrop 这将在手机上工作,并检查屏幕大小。

    看一看 here 告诉我你的想法

    确保查看函数 禁忌语 ,css和下拉式菜单的设计你可以随意修改,因为我没有太多时间。

    当有多个选项卡超出窗口大小时,将显示下拉列表。