HTML/Bootstrap標籤

Question

我一直在撞牆的一天，現在試圖找出一些簡單的標籤操作。我有3個選項卡，每個選項卡都包含不同的表單部分。當用戶在第一個時，我需要禁用第二個和第三個。然後，當填寫第一頁並單擊繼續並且驗證返回true時，我可以啓用第二個選項卡並滑動到該位置。然後，當他們完成第二頁時，點擊繼續，並驗證返回true，我可以啓用第三個選項卡並滑入它。主要的是我需要禁用選項卡，直到他們當前所在的選項卡被驗證。因此，這裏是我的html：

<ul class="nav nav-tabs" id="myTab"> 
    <li><a href="#options">Options</a></li> 
    <li><a href="#information">Information</a></li> 
    <li><a href="#payment">Payment</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="options"> 
    <form id="frmtype1" action="" name="frmtype1" method="post"> 
     <header>Registration Options</header> 
     <br/> 
     <label for="Reg_type1" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type1" value="1"/> 
     Registering myself with credit card or bank account 
     </label> 
     <br> 
     <label for="Reg_type2" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type2" value="2"/> 
     Registering multiple people using credit card or bank account 
     </label> 
     <br> 
     <label for="Reg_type3" class="checkbox"> 
      <input type="radio" name="Reg_type" id="Reg_type3" value="3"/> 
     Registering using a purchase order 
     </label> 
     <div class="form-actions"> 
      <button class="btn" type="submit">Continue</button><span class="help-inline" style="display:none;">Please choose an option</span> 
     </div> 
    </form>    
    </div> 
    <div class="tab-pane" id="information">...</div> 
    <div class="tab-pane" id="payment">...</div> 
</div> 

然後我的jquery：

var val1 = $('#frmtype1').validate({ 
$('#myTab a[href="#information"]').tab('disabled'); //i have no idea how to prevent the user from navigating here so I just put disabled. Didn't work obviously 
$('#myTab a[href="#payment"]').tab('disabled'); 
    errorPlacement: function(error, element) {}, //this is to prevent the standard error message from showing, rather you use the inline-text 
    rules: { 
     'Reg_type': { 
      required: true 
     } 
    } 
}); 

$('#frmtype1').submit(function(e) { 
    /*This will validate the first page, if the user didn't select an option then it will display 
    the inline text as an error message*/ 
    if(val1.form()) { 
     $('.help-inline').hide(); 

    } else { 
     $('.help-inline').show(); 
     return false; 
    } 
}); 

$('#myTab a').click(function (e) { 
    e.preventDefault(); 
    $(this).tab('show'); 
}) 

所以首先第一件事情，我如何禁用後續的標籤，直到當前選項卡的形式進行驗證爲真？

Answer 1

基礎上default tabs from Twitter Bootstrap，我的做法是激活的標籤在需要時（因爲除非您激活它一個標籤實際上是禁用的）僅插件：

function activateTab(selector) { 
    $(selector).on('click.twbstab',function() { $(this).tab('show'); }) 
     .closest('.disabled').removeClass('disabled'); 
} 

activateTab('#myTab a:first'); 

然後你就可以使用您的驗證過程激活選項卡。

檢查demo on jsfiddle。我使用了一個額外的類來顯示選項卡被禁用。

<ul class="nav nav-tabs" id="myTab"> 
    <li class="disabled active"><a href="#home">Home</a></li> 
    <li class="disabled"><a href="#profile">Profile</a></li> 
    <li class="disabled"><a href="#messages">Messages</a></li> 
    <li class="disabled"><a href="#settings">Settings</a></li> 
</ul> 

.nav-tabs li.disabled { color: grey; } 
.nav-tabs li.disabled a:hover { border-color: transparent; } 

您還可以通過使用類似的東西禁用激活後標籤：

function deactivateTab(selector) { 
    $(selector).off('click.twbstab') 
     .closest('li').addClass('disabled'); 
} 

Answer 2

的jQuery UI選項卡肯定可以讓你添加標籤動態 - 看演示here

代碼的主要線路有：

tabs.find(".ui-tabs-nav").append(...);//adds a new tab 
tabs.append(...);//append content top be selected by the new tab 
tabs.tabs("refresh");//updates the internals and the screen 

我敢肯定，其他選項卡插件提供相同或相似。

另一種選擇是EasyTabs，它允許製表符「可取消」（請參閱​​頁面底部附近的「可摺疊和可取消」演示） - 即。只有滿足某些條件時纔可以選擇它們（演示中的確認對話框，但可能包含任何您喜歡的內容）。這可能比動態添加選項卡更簡單也更可取。