在 primefaces 向导的最后一个选项卡上隐藏后退按钮答案

【问题标题】：Hide back button at last tab in primefaces wizard在 primefaces 向导的最后一个选项卡上隐藏后退按钮
【发布时间】：2013-01-14 16:05:09
【问题描述】：

我想在向导的最后一个选项卡上隐藏 BACK 按钮。我正在使用素面。解决办法是什么？

谢谢

【问题讨论】：

标签： primefaces

【解决方案1】：

你可以在客户端使用 jQuery：

假设您在展示中使用向导：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");
    }

}

您还可以注意到，向导中的下一个按钮在最后一个面板中以相同的方式隐藏（由 PF 客户端）。

【讨论】：

【解决方案2】：

同样的问题困扰了很久，终于解决了。也许我的解决方案可以在未来对其他人有所帮助：

网页：

<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")
            }
        }

【讨论】：

值得一提的是visibility: hidden 保留了元素的空间 - 请参阅What is the difference between visibility:hidden and display:none?
真的很有用。谢谢。

【解决方案3】：

我想分享我使用 PrimeFaces 6.2 的解决方案。视图端没有自定义 JavaScript。

<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>

在流监听器中，我只是隐藏导航按钮并在最后一步禁用导航栏。隐藏导航栏是必要的。否则 PrimeFaces 内部 JavaScript 向导会再次将它们淡入。

@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】：

从托管 bean 你可以试试这个：

  @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();");
         }
  }

}

【讨论】：