減少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/