我希望将导航按钮放在 primefaces 向导组件的步骤标题下方:
由于 primefaces 会同时生成向导的步骤图块和内容,因此我不确定如何在向导组件的两个部分之间插入元素(在本例中为导航按钮)。无论如何要这样做?
谢谢 :)
我希望将导航按钮放在 primefaces 向导组件的步骤标题下方:
由于 primefaces 会同时生成向导的步骤图块和内容,因此我不确定如何在向导组件的两个部分之间插入元素(在本例中为导航按钮)。无论如何要这样做?
谢谢 :)
最简单的解决方案是将您的向导设置为不显示导航按钮,然后创建您自己的按钮:
<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();" />
我知道这个问题有点过时了,但也许这会对某人有所帮助。除了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>
我用它来定位对话框底部的按钮。