Question

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

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

谢谢：）

Answer 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();" />

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

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

在p：向导中重新定位导航按钮

2 个答案: