将向导导航栏放在顶部位置答案

【问题标题】：Put wizard navbar on top position将向导导航栏放在顶部位置
【发布时间】：2014-06-27 07:15:27
【问题描述】：

我正在使用向导组件。导航栏在底部，但我的老板想让我把它放在向导的顶部，我认为这是一个属性或标签可以直接做到这一点，但我一直在查看文档，我应该是错的（我只找到了 showNavBar 标签）。

有没有办法在没有 css 或 jquery 的情况下做到这一点？（在使用某些组件时，我们在应用程序设置 css 中遇到了一些问题，所以我想避免它）。

非常感谢

【问题讨论】：

标签： primefaces navbar wizard

【解决方案1】：

您可以通过以下两种方式之一实现：

1 - 扩展WizardRenderer

通过扩展WizradRenderer，您可以更改编码顺序。

在original Renderer 中，encodeContent(facesContext, wizard); 在encodeNavigators(facesContext, wizard); 之前被调用，因此非常简单，扩展自定义渲染器，更改调用顺序。

public class ExNavWizardRenderer extends org.primefaces.component.wizard.WizardRenderer{

   @Override
   protected void encodeMarkup(FacesContext facesContext, Wizard wizard) throws IOException {
       ResponseWriter writer = facesContext.getResponseWriter();
       String clientId = wizard.getClientId(facesContext);
       String styleClass = wizard.getStyleClass() == null ? "ui-wizard ui-widget" : "ui-wizard ui-widget " + wizard.getStyleClass();

       writer.startElement("div", wizard);
       writer.writeAttribute("id", clientId, "id");
       writer.writeAttribute("class", styleClass, "styleClass");
       if(wizard.getStyle() != null) {
           writer.writeAttribute("style", wizard.getStyle(), "style");
       }

       if(wizard.isShowStepStatus()) {
           encodeStepStatus(facesContext, wizard);
       }
       // encode the navigators before the content
       if(wizard.isShowNavBar()) {
           encodeNavigators(facesContext, wizard);
       }

       encodeContent(facesContext, wizard);

       writer.endElement("div");
   }
}

更新您的faces-config.xml

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.WizardRenderer</renderer-type>
        <renderer-class>com.projectPackage.ExNavWizardRenderer</renderer-class>
    </renderer>
</render-kit>

2 - jQuery

在您的document.ready 中，您可以更改 DOM，例如这将与渲染器相同：

$('.ui-wizard-step-titles').after($('.ui-wizard-navbar'))

【讨论】：

谢谢它是完美的！