减少jQuery UI的标签代码

Question

，所以我有大约20个标签（网页）中，许多子标签，全部采用下面类似的代码显示：

我在想我怎么能缩小这个代码在主把JS文件和使用/再使用用于每个股利??，因为这些标签被加载。

我打的障碍是，我需要照顾所有这些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常规，这将然后加李其独特的类别（名称相同）。

所以，这段代码repeates为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为您提供所需的speicificity。使用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/