如何创建多步骤表单

Question

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

请告诉我如何继续这样做。

Answer 1

您可以尝试利用geometrixx-outdoors中提供的OOTB tabctrl 组件以及OOTB表单组件。唯一需要的自定义是更改表单结束组件以容纳prev和next按钮，然后添加一些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网站中包含相应的clientlib，否则tabctrl将无法正常工作。或者，您可以在geometrixx-outdoors网站上进行检查。