如何創建多步表單

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 站點中包含適當的 clientlibs，否則 tabctrl 將無法正常工作。 或者，您可以在 geometrixx-outdoors 站點中直接查看。