Reduzierung jquery UI Tabs Code

Question

so habe ich rund 20 Tabs (Seiten) mit viel Unter Tabs, die alle angezeigt, um den ähnlichen Code unten:

Ich denke, wie kann ich diesen Code schrumpfen JS in Master setzen Datei und verwenden/wiederverwenden für jedes Div ??, wie diese Tabs geladen werden.

Der Roadblock, den ich treffe, ist, dass ich auf all diese Divs aufpassen muss, also muss ich diesen Code 20+ mal schreiben ???

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

... einige Funktion auf jeder Seite wird ihre einzigartige divOneAddTab Routine aufrufen und die dann li seiner einzigartigen Klasse (gleichnamigen) hinzuzufügen.

so, dieser Code repeates für 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

Dies ist, was Klassen sind für. Alles, was ein gemeinsames Verhalten hat, sollte dieselbe Klasse haben. Fügen Sie Ihren Tab-Containern eine allgemeine Klasse wie tabContainer hinzu, mit der Sie auf alle Registerkartencontainer verweisen können. Auch die Klasse divOneTabs muss nicht spezifisch sein, da die Eltern-ID Ihnen die erforderliche Spezifität gibt. Verwenden Sie IDs, um bestimmte Instanzen zu identifizieren, und Klassen, um allgemeine Blöcke zu identifizieren.

Die eindeutigen IDs für den Tab-Inhalt sind in der Regel erforderlich, da sie die Registerkarte mit dem Inhalt verknüpfen.

Beispiel:

<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> 

Für jQuery Modifikationen verwenden .tabContainer:

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

Fügen Sie außerdem ein neues Argument für die addTab Funktion der spezifischen Registerkarte Container angeben. Wenn Sie die Registerkarte aus dem Container hinzufügen, benötigen Sie diese nicht, da Sie anhand des Kontexts festlegen können, wo sie hinzugefügt wird.

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/