如何使用Jquery動態克隆選項卡

Question

您好，我正在開發一個Web應用程序，並且遇到克隆問題。基本上任何時候用戶選擇一個複選框出現一個選項卡。用戶可以通過下拉框，搜索框和添加按鈕將詳細信息添加到此選項卡上的表格中。

當用戶選擇不同的複選框用空白表中的新選項卡將出現下一個上一上。我希望用戶能夠選擇從先前選定的選項卡進行復制或從空白處開始。

開始空白，似乎我補充說，在選項卡中顯示的鏈接，一旦點擊了鏈接僅僅是隱藏的標籤與空白表提醒簡單。

$(document).ready(function(){ 
    $("#tabs").tabs(); 

    $(".selectedCodeCheckbox").change(function(){ 
     if ($(this).is(':checked')) { 

      // show tab   
      $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'block'); 
      $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'block'); 
      $("#tabs").tabs("select" , $("#tabs").find(".tabpanel-"+$(this).val()).attr('id')); 
      $(".step2").css('display', 'block'); 
     } else { 
      // remove tab 
      $("#tabs").find(".tabheader-"+$(this).val()).css('display', 'none'); 
      $("#tabs").find(".tabpanel-"+$(this).val()).css('display', 'none'); 
     } 
    }); 

這會在選中複選框後顯示選項卡。

<div style="width: 600px; float: left; margin-left: 30px; margin-top: 10px;"> 
        <table id="clubListTable_${instanceEntry.key}" class="reports" style="width: 100%;"> 
         <thead> 
          <tr> 
           <th>Unit Type</th> 
           <th>Unit Name</th> 
           <th><spring:message code="generic.male" text="Male" /></th> 
           <th><spring:message code="generic.female" text="Female" /></th> 
           <th> 
            <spring:message code="generic.remove" text="Remove" /> 
           </th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr class="emptyRow"> 
           <td colspan="5">No Units Added</td> 
          </tr> 
         </tbody> 
         </table> 

       </div> 

這是我希望克隆的選項卡中的表格。 每個選項卡都是從相同的 <div id="tabs"動態創建的。

，其中突片被放置的順序是按字母順序排列。由於只有6個複選框，因此只能有1-6個選項卡。

而且如果可能的話可能有人還解釋我是如何將能夠不給用戶任何選項，如果是選擇了第一個複選框。也只是在一邊而不是用戶可以選擇多個複選框來產生多個選項卡。

Answer 1

在這裏，我所做的樣本：http://jsbin.com/welcome/50444/ 也許一個例子將幫助您

<div id="tabs" style="height:300px;"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li id="tab3"><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1">content 1</div> 
    <div id="tabs-2">content 2</div> 
    <div id="tabs-3">content 3</div> 
</div> 


<script> 
    $(function() { 
     $("#tabs").tabs(); 
    }); 

    function cloneLast(){ 
    var lastDiv = $('#tabs div:last-child'); 
    var lastLi = $('#tabs').find('li').last().find('a'); 
    $("#tabs").tabs('add','#newTab',lastLi.html()); 
    $('#newTab').html(lastDiv.html()); 
    } 
</script> 
<a href="#" onclick="if($('#tab3').is(':visible')) $('#tab3').hide(); else $('#tab3').show();">toggle visibility</a> 

<a href="#" onclick="cloneLast()">clone last</a>