在 p:wizard 中重新定位导航按钮答案

【问题标题】：Repositioning nav buttons in p:wizard在 p:wizard 中重新定位导航按钮
【发布时间】：2013-08-01 13:18:50
【问题描述】：

我希望将导航按钮放在 primefaces 向导组件的步骤标题下方：

由于 primefaces 会同时生成向导的步骤图块和内容，因此我不确定如何在向导组件的两个部分之间插入元素（在本例中为导航按钮）。无论如何要这样做？

谢谢:)

【问题讨论】：

标签： jsf button primefaces position wizard

【解决方案1】：

最简单的解决方案是将您的向导设置为不显示导航按钮，然后创建您自己的按钮：

<p:wizard widgetVar="myWizard" showNavBar="false" ... >
<p:commandButton style="..." value="Back" icon="ui-icon-arrow-1-w" 
    iconPos="right" type="button" onclick="myWizard.back();" />

<p:commandButton style="..." value="Next" icon="ui-icon-arrow-1-e" 
    iconPos="left" type="button" onclick="myWizard.next();" />

您也可以使用 jQuery 和 CSS 来做到这一点，但在我看来，这种方式更加困难。

编辑：-

对于 Primefaces5.1 +

<p:commandButton style="..." value="Back" icon="ui-icon-arrow-1-w" iconPos="right" onclick="PF('myWizard').back()" />
<p:commandButton style="..." value="Next" icon="ui-icon-arrow-1-e" iconPos="left" onclick="PF('myWizard').next();" />

【讨论】：

是的，我已经尝试过了，但是如何将这些按钮放在步骤标题的正下方？
谢谢！但是，我必须将这些按钮放在每个选项卡的正下方。不在向导的正下方。
在 PrimeFaces 5.1 中，onclick 的正确行为是“PF('myWizard').back()”。否则无法识别 myWizard。

【解决方案2】：

我知道这个问题有点过时了，但也许这会对某人有所帮助。除了 patstuart 的回答（对我很有帮助的一个很好的回答，+1）之外，您还可以将这些控件放在带有 CSS 的 div 中，如下所示：

.formControlsBottom {  position: absolute !important;  bottom: 15px !important;  right: 15px !important;}

xhtml:

<div class="formControlsBottom">
    <p:commandButton value="Back" icon="ui-icon-arrow-1-w" iconPos="right" type="button" onclick="PF('myWizard').back();"/>
    <p:commandButton value="Next" icon="ui-icon-arrow-1-e" iconPos="left" type="button" onclick="PF('myWizard').next();"/>
</div>

我用它来定位对话框底部的按钮。

【讨论】：