如何创建多步骤表单

Question

我们希望为作者提供创建多步骤选项卡或向导的选项。这个步骤/选项卡的数量应该可以在“编辑”按钮的“表单开始”组件中进行配置。一旦作者选择了步骤/选项卡的数量，将自动创建步骤/选项卡，然后作者可以拖放其他组件，例如“文件上传”等。请参阅随附的屏幕截图。

请让我知道如何进行此操作。

Answer 1

您可以尝试利用 geometrixx-outdoors 中提供的 OOTB tabctrl 组件以及 OOTB 表单组件。唯一需要的自定义是更改表单结束组件以容纳上一个和下一个按钮，然后添加一些 javascript 以在单击这些按钮时导航选项卡。

创建这个的步骤。

• 将默认表单组件拖放到页面上。
• 在表单内部拖放选项卡控件组件。
• 在选项卡控件组件中配置所需的选项卡数量和每个选项卡中的内容。
• 修改表单结束组件以容纳上一个和下一个按钮。
• 使用以下 JS 附加上一个和下一个按钮的处理程序（目前仅包含基本功能。可根据您的要求进行修改）。

JS：

jQuery(function ($) {
    $(document).on('click', '.prev', function(){ // 'prev' is class of previous button
        var tabctrl = $(this).closest('form').find('.tabctrl');
        var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
        $(currentItemHeader).prev().find('a').click();
    });
    $(document).on('click', '.next', function(){ // 'next' is class of next button
        var tabctrl = $(this).closest('form').find('.tabctrl');
        var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
        $(currentItemHeader).next().find('a').click();
    });
});

注意：在测试之前尝试在 geometrixx 站点中包含适当的客户端库，否则 tabctrl 将无法正常工作。或者，您可以在 geometrixx-outdoors 网站上直接查看。