Multi-Page Prev/Next buttons

PHPMaker General Discussion (PHPMaker)
1

Hi,

playing with this code for the next previous buttons:

currentForm.multiPage.set({
    // lastPageSubmit: true, // Enable submit button for the last page only
    // hideDisabledButton: true, // Hide disabled submit button
    // hideInactivePages: true, // Hide inactive pages
    // hideTabs: true, // Hide all tabs
    // showPagerBottom: true, // Show pager at bottom
    // pagerTemplate: '<nav><ul class="pager"><li class="previous ew-prev"><a href="#"><span class="icon-prev"></span> {Prev}</a></li><li class="next ew-next"><a href="#">{Next} <span class="icon-next"></span></a></li></ul></nav>', // Pager template
    lockTabs: true, // Set inactive tabs as disabled
    showPagerTop: true // Show pager at top
});

is there any way to specify which tabs to use?, there are some hidden tabs that it scrolls through as well, for example would like to only scroll 1,2,3,7 (there are 7 tabs total)

tried the pageIndexes[] and pages attributes, not sure if i’m setting correctly

thanks,

2

You may add the class ew-disabled or ew-hidden to disabled/hidden tabs.

3

thanks,

I have something similar, the tabs hidden on load. i added the classes as noted, not too much difference exceept for one of the “hidden” tabs had a field that was active, this was removed. there are now 3 “blank” clicks to move the the last page. [view view view click, click, click, view]
.
not sure if we did it correctly…

this is the code in the register form client script

loadjs.ready("head", function () {
    // Client script

// original entries to hide tabs
        $("li.nav-item > button.nav-link[data-bs-
target='#tab_tbl_sys_membership3']").hide();
        $("li.nav-item > button.nav-link[data-bs-target='#tab_tbl_sys_membership4']").hide();
        $("li.nav-item > button.nav-link[data-bs-target='#tab_tbl_sys_membership5']").hide();
        $("li.nav-item > button.nav-link[data-bs-target='#tab_tbl_sys_membership6']").hide();

// code to try to get next/prev to move between active tabs 1,2,3,7 (4,5,6 are hidden and should be skipped, next/prev buttons advance through all regardless of hidden/disabled)

        $("#tab_tbl_sys_membership3").addClass("ew-disabled");
        $("#tab_tbl_sys_membership4").addClass("ew-disabled");
        $("#tab_tbl_sys_membership5").addClass("ew-disabled");
        $("#tab_tbl_sys_membership6").addClass("ew-disabled");

        currentForm.multiPage.set({
            hideInactivePages: false, // Hide inactive pages
            hideTabs: false, // Hide all tabs
            lockTabs: false, // Set inactive tabs as disabled
            showPagerTop: true, // Show pager at top
            showPagerBottom: true // Show pager at bottom
        });
});

thanks

4

You should add the class to the tab button (look for button with class="nav-link"), not the tab.