Hide back button at last tab in primefaces wizard

问题

I would like to hide the BACK button at the last tab in a wizard. I'm using primefaces. What would be the solution for it?

Thank you

回答1:

you can do it client-side using jQuery :

Assuming you are using the wizard in the showcase: http://www.primefaces.org/showcase/ui/wizard.jsf:

<p:wizard widgetVar="wiz"  
        flowListener="#{userWizard.onFlowProcess}"
        onNext="hideBackOnLastTab()">

javascript:

function hideBackOnLastTab() {
    if($("ul.ui-wizard-step-titles>li").last()
             .is("ul.ui-wizard-step-titles>li.ui-state-highlight")) {
            $("div.ui-wizard-navbar>button.ui-wizard-nav-back").css("display", "none");
    }

}

Also you can notice that the next button in wizard is hidden (by the PF client-side) at last panel the same way.

回答2:

I've had the same issue for a long time and finally solved it. Maybe my solution can be helpfull for others in the future:

Webpage:

<p:wizard id="dataLoadSetWizard" widgetVar="wiz" onnext="hideBackOnLastTab()" ...

Javascript:

function hideBackOnLastTab() {
            if(PF('wiz').getStepIndex(PF('wiz').currentStep) > 0) {
                PF('wiz').backNav.css("visibility", "hidden")
            }
        }

回答3:

I would like to share my solution using PrimeFaces 6.2. There is no custom JavaScript on the view side.

<p:importConstants
  type="com.example.WizardController"
  var="WizardController"
></p:importConstants>

<p:wizard
  flowListener="#{wizardController.onFlow}"
  widgetVar="wizard"
>
  <p:tab id="#{WizardController.STEP_LAST}">
  </p:tab>
</p:wizard>

In the flow listener I just hide the navigation buttons and disable the navigation bar on the last step. Hiding the navigation bar is necessary. Otherwise PrimeFaces internal JavaScript for wizard will fade them in again.

@ViewScoped
@Named
public class WizardController {

  public static final String STEP_LAST = "last";

  public String onFlow(FlowEvent flowEvent) {
    if (flowEvent.getNewStep().equals(STEP_LAST)) {
      PrimeFaces.current().executeScript("PF('wizard').backNav.hide(); PF('wizard').nextNav.hide(); PF('wizard').cfg.showNavBar = false;");
    }
  }
}

回答4:

From managed bean you can try this:

  @ManagedBean(name = "testWizardBean")
  @ViewScoped
  public class TestWizardBean implements Serializable {

         private RequestContext requestContext;

         @PostConstruct
         public void init() {
              requestContext = RequestContext.getCurrentInstance();
              if (testWizardDto.getDirection().isEmpty()) {
                    requestContext.execute("PF('signwzd').nextNav.hide();");
         }
  }

}

来源：https://stackoverflow.com/questions/14322077/hide-back-button-at-last-tab-in-primefaces-wizard

标签

primefaces