Twitter Bootstrap - Dynamicznie Dodaj/Usuń Tabs i Tab Content

Question

Dzięki z góry za wszelkie wejścia/pomoc/poradę ...

używam zakładek Twitter Bootstrap zorganizować jakieś informacje. Karty będą znajdować się na stronie formularza, a każda karta będzie składać się z "formularza kontaktowego", w którym użytkownik może dodać wiele kontaktów do tej strony przed przesłaniem całego formularza.

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

Pełny kod tutaj: http://jsfiddle.net/Harlow/zQnck/34/

Próbuję naśladować funkcjonalność „manipulacji” prosty przykład jQuery UI w kart. (http://jqueryui.com/tabs/#manipulation)

Co Obecnie mam doda nową kartę, ale chcę, aby móc dodać nową, unikalną kartę z własnym ID (ustawicznego z kodu, jak „contact_01, contact_02 itp”) klikając na "+ Dodaj nowy kontakt", który zawsze będzie ostatnią zakładką, ale w rzeczywistości nie ma własnego panelu zawartości karty. Po drugiej stronie dynamicznego dodawania treści chcę móc ją usunąć, klikając małe "x" na każdej karcie.

--EDIT--

Właśnie w celu wyjaśnienia, przykład wyzwalacz jQuery jest modalne po kliknięciu „Nowa karta”. Dla moich celów chcę po prostu utworzyć nową kartę bez wprowadzania nazwy karty lub treści (treść zawsze będzie tym samym formularzem kontaktowym i nic mi nie będzie, jeśli nazwa karty będzie taka sama jak nowo wygenerowany identyfikator - będę automatycznie aktualizuje nazwę kontaktu później).

Answer 1

EDYCJA: Powielałem oryginalne skrzypce najlepiej jak potrafiłem, ponieważ zginęły oba skrzypce.

Nowy skrzypce: 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>'); 
}); 

Zauważ, że usunąłem funkcję aktywowania i zamiast używanego css

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

Answer 2

jsfiddle Dogoku wydaje się być 404, więc ułożyła szybki jsfiddle roztworu tutaj: http://jsfiddle.net/xQ3f5/

Zaktualizowałem to, aby zatrzymać "aktywną" klasę stosowaną do elementu zakładki + Dodaj kontakt, ponieważ to nie jest Odpowiada do dowolnego elementu karty. Proponuję również przełączenie aktywnej karty na nowo utworzoną. Oto 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'); 
});