Как вызвать плагин Jquery tabdrop () из виджета Jquery Tab? - PullRequest
Новая
       37

Как вызвать плагин Jquery tabdrop () из виджета Jquery Tab?

0 голосов
/ 30 декабря 2018

Так же, как этот Плагин Jquery , у меня есть вкладка 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 Ответ

0 голосов
/ 26 февраля 2019

Хорошо, я создал свой tabdrop, который будет работать на мобильном телефоне, а также проверить размер экрана.

Посмотрите здесь и дайте мне знать, что вы думаете

Обязательно ознакомьтесь с функцией tabdrop, css и дизайном выпадающего меню, которое вы можете изменить по своему усмотрению, поскольку у меня на самом деле не было много времени.

Выпадающее меню появится, когда необходимомного вкладок, которые превышают размер окна.

...