2

私は1日間壁に頭をぶつけて、簡単なタブ操作を理解しようとしています。3つのタブがあり、それぞれにフォームのさまざまな部分が含まれています。ユーザーが最初にいる間、2番目と3番目を無効にする必要があります。次に、最初のページに入力して[続行]をクリックし、検証がtrueを返したら、2番目のタブを有効にして、そこにスライドします。次に、2ページ目を終了し、[続行]をクリックして、検証がtrueを返したら、3番目のタブを有効にしてスライドします。主なことは、現在表示されているタブが検証されるまで、タブを無効にする必要があるということです。これが私の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');
})

では、まず最初に、現在のタブのフォームがtrueであることが検証されるまで、後続のタブを無効にするにはどうすればよいですか？

4

2 に答える 2

3

Twitter Bootstrapのデフォルトのタブに基づいて、私のアプローチは、必要な場合にのみタブプラグインをアクティブ化することです（タブをアクティブ化しない限り、タブは実際には無効になっているため）：

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

activateTab('#myTab a:first');

次に、検証プロセスを使用してタブをアクティブ化できます。

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');
}
于 2012-11-02T18:48:11.377 に答える
0

jQuery UIタブを使用すると、タブを動的に追加できます。デモはこちらをご覧ください

コードの重要な行は次のとおりです。

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

他のタブプラグインも同じか類似したものを提供すると確信しています。

もう1つのオプションはEasyTabsです。これにより、タブを「キャンセル可能」にすることができます（ページ下部の「折りたたみ可能およびキャンセル可能」デモを参照）。これらは、いくつかの条件が満たされた場合にのみ選択できます（デモの確認ダイアログですが、必要なものがあれば可能性があります）。これは、タブを動的に追加するよりも簡単で望ましい場合があります。

于 2012-11-02T15:44:44.780 に答える