社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Houy Narun • 6 年前 • 2077 次点击  

就这样 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 年前