Question

我正在编写表单向导，但我遇到了一些问题。

我想要做的是一个包含3个标签的表单，其中一个标签（tab2）带有动态标签（子标签）。

enter image description here

选项卡1有3个输入文本，用于添加新的＆＃34;子选项卡＆＃34;。标签2有＆＃34;子标签＆＃34;或嵌套向导。子选项卡在上一步中创建。标签3是带有一些投影的最终标签。

因此，用户输入注册表单并以tab1开头。然后添加1-n子标签（参加儿童营的露营者），比如露营车1，露营车2，露营车3 ...... 然后，当他完成添加子标签后，转到主tab2。这里有以前添加的子标签：camper1，camper2，camper3，每个都有很多字段。当他点击下一步进入subtab1，然后是subtab2，然后是subtab3，当没有更多的子标签时，它会进入主Tab3。

代码在此fiddle

中

html：

<div id="form-wizard" class="wizard">
    <div class="steps">
        <div data-target="#st1" class="active"><a href="#">Step 1</a>
        </div>
        <div data-target="#st2"><a href="#">Step 2(with subitems)</a>
        </div>
        <div data-target="#st3"><a href="#">Step 3</a>
        </div>
    </div>
    <div class="sub-steps">
        <div data-target="#sb1" class="active"><a href="#">Substep1</a>
        </div>
        <div data-target="#sb2"><a href="#">Substep2</a>
        </div>
        <div data-target="#sb3"><a href="#">Substep3</a>
        </div>
        <div data-target="#sb4"><a href="#">Substep4</a>
        </div>
    </div>
</div>
<div class="step-content">
    <div class="step-pane active" id="st1">
        <p>This is the first step in this wizard example...</p>
    </div>
    <div class="step-pane" id="st2">
        <div class="sub-step-content">
            <div class="sub-step-pane active" id="sb1">
                <p>This is the SUB-STEP 1</p>
            </div>
            <div class="sub-step-pane" id="sb2">
                <p>This is the SUB-STEP 2</p>
            </div>
            <div class="sub-step-pane" id="sb3">
                <p>This is the SUB-STEP 3</p>
            </div>
            <div class="sub-step-pane" id="sb4">
                <p>This is the SUB-STEP 4</p>
            </div>
        </div>
    </div>
    <div class="step-pane" id="st3">
        <input type='text' name='name' id='name' placeholder='Enter Your Name' />
        <input type='text' name='name' id='name' placeholder='Enter Your Name' />
    </div>
</div>
<div class="step-nav"> <a href="#" id="prev-step">Prev</a>
 <a href="#" id="next-step">Next</a>

</div>
<p class="debug">debug</p>

jquery是这样的：

var subPanelId = '#st2';

$('#next-step').click(function (e) {

    e.preventDefault();

    var currentTab = $('.steps .active'),
        currentSubTab = $('.sub-steps .active'),
        totalSubtabs = $('.sub-step-pane').size(),
        lastSubTab = $('.sub-step-pane:last');

    if (currentTab.data('target') != subPanelId) {

        moveToTab('.steps', '.step-content', 'next');

    } else {

        if (currentSubTab.index() < (totalSubtabs - 1)) {

            moveToTab('.sub-steps', '.sub-step-content', 'next');

        } else {

            moveToTab('.steps', '.step-content', 'next');

        }
    }

});

$('#prev-step').click(function (e) {

    e.preventDefault();

    var currentTab = $('.steps .active'),
        currentSubTab = $('.sub-steps .active');

    if (currentTab.data('target') != subPanelId && currentSubTab.index() > 0) {

        moveToTab('.steps', '.step-content', 'prev');

    } else {


        if (currentSubTab.index() > 0) {

            moveToTab('.sub-steps', '.sub-step-content', 'prev');

        } else {

            moveToTab('.steps', '.step-content', 'prev');

        }

    }
});

function activateSub(currentTab) {
    if (currentTab == subPanelId || $(currentTab).parent().hasClass('sub-step-content')) $('.sub-steps').show();
    else $('.sub-steps').hide();
}

function moveToTab(tabContainer, tabContent, dir) {

    var totalTabs = $(tabContainer).find('div').size();

    currentTab = $(tabContainer).find('.active');

    if (currentTab.index() < (totalTabs - 1)) {

        currentTab.removeClass('active');

        if (dir == 'next') {
            currentTab.next()
                .addClass('active');
        } else {
            currentTab.prev()
                .addClass('active');
        }
        $('.debug').html(currentTab.next().data('target'));

        $(tabContent).find('div')
            .removeClass('active');

        if (dir == 'next') {
            $(tabContent)
                .find(currentTab.data('target'))
                .next()
                .addClass('active');
        } else {
            $(tabContent)
                .find(currentTab.data('target'))
                .prev()
                .addClass('active');
        }

        activateSub(currentTab.next().data('target'));

    }
}

实际代码中的一些问题： - 当我添加一个新的子选项卡时，它显示在tab2下，但内容没有显示。 - 当我到达最后一个标签时，它停止工作.Prev / next按钮不再起作用。

上一页/下一页标签导航工作在以前的版本中。你可以看看它们是如何工作的： old fiddle with tab navigation

最后我必须保存数据。我没有保存数据，只是将其发送给后端开发人员进行保存。你会怎么做？

我怎样才能让它发挥作用？

jquery多步形式与另一个嵌套的多步形式

0 个答案: