Question

我正在构建一个基于fieldset形式的向导，我在几个之前尝试过但没有成功，所以我决定建立自己的。

我不知道如何处理以前的＆amp;下一个按钮，以启用/禁用取决于活动步骤。

例如，如果我在第1步“类别”，则应禁用button#previous-step（注意默认情况下在页面加载时禁用）并且应启用button#next-step（默认情况下启用），< / p>

现在，如果我转到步骤2“数据”（产品数据），那么应该启用两个按钮，依此类推，

当我完成最后一步时，应隐藏button#next-step，因为不再存在步骤，应启用并显示button#finish-wizard。

默认情况下，字段集隐藏了第一个以外的其他字段集，应该显示在上一个/下一个操作上。

我需要一些想法或示例代码来处理这个问题。我做了这个：

$("#product_create").on("click", "#tab1, #tab2, #tab3, #tab4, #tab5", function() {
    var div = $('#' + $(this).data('display'));
    if ($.trim(div.html()) !== '') {
        $('#' + $(this).data('display')).show().siblings('div').hide();
    }
    return false;
});

要处理li点击操作，但我不知道如何从这里开始，任何帮助？

这是我正在使用的HTML标记：

<form action="" id="product_create" method="post">
    <ul>
        <li id="tab1" data-display="categories-picker"><a href="#">Seleccionar categoría</a></li>
        <li id="tab2" data-display="product-create-step-2"><a href="#">Datos</a></li>
        <li id="tab3" data-display="product-create-step-3" style="display: none"><a href="#">Variaciones</a></li>
        <li id="tab4" data-display="product-create-step-4"><a href="#">Detalles del Producto</a></li>
        <li id="tab5" data-display="product-create-step-5"><a href="#">Condiciones de Venta</a></li>
    </ul>

    {# Categories Step #}
    <fieldset title="{{'Categories'|trans}}">
        <legend>{{'Categories'|trans}}</legend>
        <div id="step-1">  
            <section id="categories-picker"></section>
        </div>
        <input type="hidden" id="selected_category" name="selected_category" value="" />
    </fieldset>

    {# Product Data Step #}
    <fieldset title="{{'Data'|trans}}" style="display: none">
        <legend>{{'Data'|trans}}</legend>
        <section id="product-create-step-2">
            <input type="checkbox" name="has_variation" id="has_variation" /> Has variations?

        </section>
    </fieldset>

    {# Product Variation Step #}
    <fieldset title="{{'Variations'|trans}}" style="display: none">
        <legend>{{'Variations'|trans}}</legend>
        <section id="product-create-step-3"></section>
    </fieldset>

    {# Product Details Step #}
    <fieldset title="{{'Details'|trans}}" style="display: none">
        <legend>{{'Details'|trans}}</legend>
        <section id="product-create-step-4"></section>
    </fieldset>

    {# Product Terms & Conditions Step #}
    <fieldset title="{{'Terms & Conditions'|trans}}" style="display: none">
        <legend>{{'Terms & Conditions'|trans}}</legend>
        <section id="product-create-step-5"></section>
    </fieldset>

    <button type="button" name="finish-wizard" id="finish-wizard" style="display:none">Finish</button>
</form>

<button type="button" name="previous" id="previous-step" disabled="disabled">&#171; Previous</button>
<button type="button" name="next" id="next-step">Next &#187;</button>

需要一些建议简单向导的建议

0 个答案: