Twitter Bootstrap - Dynamisch Hinzufügen/Entfernen Tabs und Tab Content

Question

Vielen Dank im Voraus für jede und alle Ein-/Hilfe/Beratung ...

I Twitter Bootstrap Tabs bin mit ein paar Informationen zu organisieren. Die Registerkarten befinden sich auf einer Formularseite und jede Registerkarte besteht aus einem "Kontaktformular", in dem der Benutzer vor dem Senden des gesamten Formulars mehrere Kontakte zu dieser Seite hinzufügen kann.

<div class="container"> 
    <ul class="nav nav-tabs"> 
     <li class="active"><a href="#contact_01" data-toggle="tab">Joe Smith</a><span>x</span></li> 
     <li><a href="#contact_02" data-toggle="tab">Molly Lewis</a><span>x</span> </li> 
     <li><a href="#" class="add-contact" data-toggle="tab">+ Add Contact</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div class="tab-pane active" id="contact_01">Contact Form: Joe Smith</div> 
     <div class="tab-pane" id="contact_02">Contact Form: Molly Lewis</div> 
    </div> 
</div> 

Voll Code hier: http://jsfiddle.net/Harlow/zQnck/34/

Ich versuche, die Funktionalität von jQuery UI "einfache Handhabung" Beispiel von Tabs zu imitieren. (http://jqueryui.com/tabs/#manipulation)

Was ich zur Zeit füge eine neue Registerkarte, aber ich mag einen neuen, einzigartigen Tab hinzufügen, um die Lage sein, mit einem eigenen ID (aus dem Code fortgesetzt, wie „contact_01, contact_02 usw.“) indem Sie auf den "+ Neuen Kontakt hinzufügen" klicken, der immer der letzte Tab sein wird, aber keinen eigenen Tab Content-Bereich haben wird. Auf der anderen Seite des dynamischen Hinzufügens von Inhalten möchte ich in der Lage sein, es zu löschen, indem Sie auf das kleine "x" auf jeder Registerkarte klicken.

--EDIT--

Nur um zu klären, ist das jQuery Beispiel Trigger ein modaler auf "Neuer Tab" klicken. Für meine Zwecke möchte ich nur einen neuen Tab erstellen, ohne den Tabnamen oder den Inhalt einzugeben (der Inhalt wird immer das gleiche Kontaktformular sein, und mir geht es gut, dass der Tabname der neu generierten ID entspricht - das werde ich tun habe es automatisch auf den Namen des Kontakts aktualisiert.)

Answer 1

EDIT: Ich reproduzierte die ursprüngliche Geige so gut ich konnte, als beide Geiger starben.

Neue Geige: http://jsfiddle.net/dogoku/KdPdZ/2/

$(".nav-tabs").on("click", "a", function(e){ 
     e.preventDefault(); 
     $(this).tab('show'); 
    }) 
    .on("click", "span", function() { 
     var anchor = $(this).siblings('a'); 
     $(anchor.attr('href')).remove(); 
     $(this).parent().remove(); 
     $(".nav-tabs li").children('a').first().click(); 
    }); 

    $('.add-contact').click(function(e) { 
     e.preventDefault(); 
     var id = $(".nav-tabs").children().length; //think about it ;) 
     $(this).closest('li').before('<li><a href="#contact_'+id+'">New Tab</a><span>x</span></li>');   
     $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>'); 
}); 

Bitte beachte, dass ich die Hover-Funktion entfernt und stattdessen CSS verwendet

.nav-tabs > li:hover > span { 
    display:block; 
} 

Answer 2

Dogoku des jsfiddle scheint 404 zu sein, so dass ich zusammen eine schnelle jsfiddle der Lösung hier: http://jsfiddle.net/xQ3f5/

Ich habe dies aktualisiert, um zu verhindern, dass die Klasse 'active' auf das Element + Kontakt hinzufügen angewendet wird, da dies nicht der Fall ist Entspricht einem der Tab-Elemente. Ich würde auch vorschlagen, die aktive Registerkarte zu der neu erstellten zu wechseln. Hier ist die javascript:.

$(".nav-tabs").on("click", "a", function(e){ 
     e.preventDefault(); 
    if(this.id == "add-contact"){return false;} 
     $(this).tab('show'); 
    }) 
    .on("click", "span", function() { 
     var anchor = $(this).siblings('a'); 
     $(anchor.attr('href')).remove(); 
     $(this).parent().remove(); 
     $(".nav-tabs li").children('a').first().click(); 
    }); 

    $('#add-contact').click(function(e) { 
     e.preventDefault(); 
     var id = $(".nav-tabs").children().length; //think about it ;) 
     $(this).closest('li').before('<li id="contact_tab_'+id+'"><a href="#contact_'+id+'">New Tab</a></li>');   
     $('.tab-content').append('<div class="tab-pane" id="contact_'+id+'">Contact Form: New Contact '+id+'</div>'); 
     $("#contact_tab_"+id+" a").tab('show'); 
});