减少 jquery UI Tabs 代码

Question

所以我有大约 20 个标签（页面）和很多子标签，所有子标签都使用下面的类似代码显示：

我正在考虑如何缩小此代码以放入主 JS 文件并为每个 Div 使用/重用？？，因为这些选项卡已加载。

我遇到的障碍是我需要处理所有这些 Div，所以我真的必须编写相同的代码 20 多次吗？？？

    //dynamic tab add/remove
var tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' style=\"float:left;\" role='presentation'>Remove Tab</span></li>",
tabCounter = 1;

//jquery-ui
var divOneTabs = $( "#divOneTabs" ).tabs({          //same as:  $( ".selector" ).tabs( "option", "active", 1 );
  active: 0
});
$('.tabs').css('height','auto');        //extend height of tab content... not working as of now...

function divOneAddTab(t,c) {
  var label = t,
    id = t + "-" + tabCounter,
    li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
    tabContentHtml = c;

  divOneTabs.find( ".divOneTabs" ).append( li );
  divOneTabs.append( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
  //below fixes the tab height issue in jquery-ui
  //divOneTabs.append( '<div id="' + id + '"' + ' class="tabdiv" ' + '><p>' + tabContentHtml + '</p></div>' );
  divOneTabs.tabs( "refresh" );
  tabCounter++;
}

// close icon: removing the tab on click
divOneTabs.delegate( "span.ui-icon-close", "click", function() {
  var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
  $( "#" + panelId ).remove();
  divOneTabs.tabs( "refresh" );
});

divOneTabs.bind( "keyup", function( event ) {
  if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
    var panelId = divOneTabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
    $( "#" + panelId ).remove();
    divOneTabs.tabs( "refresh" );
  }
});
//end jquer-ui settings

...每个页面上的某些函数将调用其唯一的 divOneAddTab 例程，然后将 li 添加到其唯一的类（同名）。

所以，对于 divOne、divTwo 重复此代码.....

html:

<div id="divOneTabs">
<ul class="divOneTabs">
    <li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
</ul>
<div id="divOneTabsDef">
    <pre>Sample Output.</pre>
</div>

Answer 1

这就是类的用途。具有共同行为的所有事物都应该具有相同的类。向您的选项卡容器添加一个公共类，例如tabContainer，您可以使用它来引用所有选项卡容器。此外，divOneTabs 类不需要具体，因为父 ID 为您提供所需的具体性。使用 id 标识特定实例，使用类标识公共块。

标签内容的唯一 ID 通常是必需的，因为它们将标签链接到内容。

例子：

<div id="divOneTabs" class="tabContainer">
  <ul class="divTabs">
    <li><a href="#divOneTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
    <li><a href="#divOneTabsStuff">Stuff</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="divOneTabsDef">
    <pre>Sample Output 1.</pre>
  </div>
  <div id="divOneTabsStuff">
    <pre>Stuff</pre>
  </div>
</div>
<button class="addTab">Add Tab to Div One</button>

<div id="divTwoTabs" class="tabContainer">
  <ul class="divTabs">
    <li><a href="#divTwoTabsDef">Default</a><span class="ui-icon ui-icon-close" style="float: left;" role="presentation">Remove Tab</span></li>
  </ul>
  <div id="divTwoTabsDef">
    <pre>Sample Output 2.</pre>
  </div>
</div>
<button class="addTab">Add Tab to Div Two</button>

对于 jQuery 修改，使用.tabContainer:

var divTabs = $(".tabContainer").tabs({ 
    active: 0
});

另外，向addTab 函数添加一个新参数以指定特定的选项卡容器。如果您从容器中添加选项卡，则不需要此选项，因为您可以使用上下文来确定添加它的位置。

function divAddTab(p, t, c) {
    var label = t,
      id = t + "-" + tabCounter,
      li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
      tabContentHtml = c;

    p.find(".divTabs").append(li);
    p.append("<div id='" + id + "'><p>" + tabContentHtml + "</p></div>");
    p.tabs("refresh");
    tabCounter++;
}

JSfiddle 演示：https://jsfiddle.net/pjutycf6/