Bootstrap - динамически добавленные вложенные вкладки

Question

Я только начал изучать разработку интерфейса & действительно нужна помощь с практическим проектом.

Я пытаюсь создать двухслойные вложенные вкладки, где пользователь может добавлять вкладки на внешний слой. Каждая внешняя вкладка будет иметь внутренние вкладки, где пользователь может также добавить дополнительные внутренние вкладки. На каждой вкладке будет такой же контент, поэтому я использую iframe для этого - если у вас есть лучшее предложение, я бы очень хотел его услышать.

Проблема, с которой я сейчас сталкиваюсь, заключается в том, что я не знаю, как привязать внутренние вкладки к внешним вкладкам. Каждая из внешних вкладок должна иметь разное количество вкладок в зависимости от того, сколько внутренних вкладок создается пользователем. Кажется, я не могу это сделать & все мои внешние вкладки в настоящее время имеют те же внутренние вкладки.

Любая помощь/ввод будет очень оценен! Благодарю.

Вот мой фрагмент кода:

<div class="container"> 
    <!-- top level tabs --> 
     <ul class="nav nav-tabs" id="topNav"> 
      <li class="active"><a href="#top1" data-toggle="tab">Home</a><span>x</span></li> 
      <li><a href="#" class="addTop" data-toggle="tab">+ Add Tab</a></li> 
     </ul> 
     <div class="tabbable"> 
      <!--bottomNav --> 
      <ul class="nav nav-tabs" id="bottomNav"> 
       <li class="active"><a href="#bottom1" data-toggle="tab">Test</a><span>x</span></li> 
       <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li> 
      </ul> 

       <div class="tab-content"> 
        <div class="tab-pane active" id="bottom1"><br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0"></iframe></div> 
       </div> 
      </div> 
     </div> 

Мой сценарий:

$(document).ready(function() { 

$(".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(); 
    }); 
    /* Adding New Tabs */ 
    $('.addTop').click(function(e) { 
     e.preventDefault(); 
     var id = $("#topNav").children().length; 
     $(this).closest('li').before('<li><a href="#top'+id+'">#'+ id + '</a><span>x</span></li>'); 
     // $('.tab-content').append('<div class="tab-pane" id="top'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>'); 

    }); 
    $('.addBottom').click(function(e) { 
     e.preventDefault(); 
     var id = $("#bottomNav").children().length; 
     $(this).closest('li').before('<li><a href="#bottom'+id+'">#'+ id + '</a><span>x</span></li>');   
     $('.tab-content').append('<div class="tab-pane" id="bottom'+id+'">'+ '<br><iframe src="form.html" width="100%" height="60%" allowtransparency="true" frameBorder="0">' + '</iframe>' + '</div>'); 

    }); 
}); 

Answer 1

Есть готовые sollutions там, но давайте оставим это для других, чтобы предложить.

В ответ на вашу проблему: ваше событие addTop.onclick добавляет новую вкладку, но не создает новый content.tabbable для указанной вкладки.

При объявлении новой вкладки вы должны сделать 3 вещи:

1. создать новую вкладку.
2. Создайте новый контент для новой вкладки.
3. ассоциированное мероприятие.

Очевидно, что вы пропустили номер 2 & 3.

Пример:

$('.addTop').click(function(e){ 
    e.preventDefault(); 

    // create new tab 
    var newTab = $('<li>New Tab</li>'); 
    $('#topNav').append(newTab); 

    // create new content for the new tab 
    var newTabContent = $('<div class="tabbable"></div>').hide(); 
    $('.container').append(newTabContent); 

    // associate tab to content 
    newTab.click(function(){ 
     newTabContent.show(); 
     // hide others 
     $('.container > .tabbable').hide(); 
    }); 
}); 

Answer 2

Надеется, что это может помочь. Это решение без использования IFRAME

Вы можете увидеть эффект в jsfiddle ссылке ниже: http://jsfiddle.net/Lzfsgeq9/

В принципе некоторые моменты, которые вы должны быть в курсе являются:

1.Use ahref направить вас подвкладку из родительской вкладки

2.Use «на» слушателе событий, чтобы иметь дело с вновь созданным элементом о выпуске делегирования событий

<div class="tabbable boxed parentTabs"> 
<ul id="topNav" class="nav nav-tabs"> 
    <li class="active"><a href="#top1">Tab 1</a> 
    </li> 
    <li><a href="#top2">Tab 2</a> 
    </li> 
    <li><a href="#" class="addTop" data-toggle="tab">+ Add Tab</a></li> 
</ul> 
<div class="tab-content"> 
    <div class="tab-pane fade active in" id="top1"> 
     <div class="tabbable"> 
      <ul id="bottomNav1" class="nav nav-tabs" data-parent="1"> 
       <li class="active"><a href="#bottom11">Tab 11</a> 
       </li> 
       <li><a href="#bottom12">Tab 12</a> 
       </li> 
       <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li> 
      </ul> 
     </div> 
    </div> 
    <div class="tab-pane fade" id="top2"> 
     <div class="tabbable"> 
      <ul id="bottomNav2" class="nav nav-tabs" data-parent="2"> 
       <li class="active"><a href="#bottom21">Tab 21</a> 
       </li> 
       <li><a href="#bottom22">Tab 22</a> 
       </li> 
       <li><a href="#" class="addBottom" data-toggle="tab">+ Add Tab</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 

$("ul.nav-tabs").on("click","a",function (e) { 
      e.preventDefault(); 
      $(this).tab('show'); 
    }); 

    $('.addTop').click(function(e) { 
      e.preventDefault(); 
      var id = $("#topNav").children().length; 
      $(this).closest('li').before('<li><a href="#top'+id+'">Tab'+ id + '</li>'); 
      createNewSubTab(id); 
    }); 

    $('div.tab-content').on("click",".addBottom",function(e) { 
     e.preventDefault(); 
     var parentId = $(this).closest('ul').data("parent"); 
     var id = $("#bottomNav" + parentId).children().length; 
     $(this).closest('li').before('<li><a href="#bottom'+parentId+id+'">Tab'+ parentId + id + '</li>'); 
    }); 

    var createNewSubTab = function(id){ 
     var bottomTabPane = $("<div></div>").attr({ 
      id: "top" + id, 
      "class": "tab-pane fade" 
     }); 
     var tabContainer = $("<div></div>").attr({ 
      "class":"tabbable" 
     }); 
     var bottomPanel = $("<ul></ul>").attr({ 
        id:"bottomNav"+id, 
        "class":"nav nav-tabs", 
        "data-parent": id 
     }); 
     var bottomAdd = $("<li></li>").append("<a href='#' class='addBottom' data-toggle='tab'>+ Add Tab</a>"); 
     bottomTabPane.append(tabContainer); 
     tabContainer.append(bottomPanel); 
     bottomPanel.append(bottomAdd); 
     $(".tab-content").append(bottomTabPane); 
    }