Py学习  »  Jquery

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

Houy Narun • 6 年前 • 1960 次点击  

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

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

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/47035
文章 [ 1 ]  |  最新文章 6 年前
Alen.Toma
Reply   •   1 楼
Alen.Toma    7 年前

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

看一看 here 告诉我你的想法

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

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