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来标识特定实例，使用类来标识公共块。

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

示例：

<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 Demo：https://jsfiddle.net/pjutycf6/

减少jquery UI标签代码

1 个答案: