Primefaces 向导自定义 back/next 按钮标签

Question

我有一个关于 primefaces 向导的 back/next 按钮标签的问题。可以自定义导航按钮标签，如下例所示：

第 0 步的按钮标签 -> 显示按钮标签文本 "Next 1"
第 1 步的按钮标签 -> 显示按钮标签文本 "Next 2" 和按钮后退标签 "Back 1"
第 2 步的按钮标签 -> 显示按钮标签文本 "Next 3" 和按钮后退标签 "Back 2"
...

此致，穆克斯

Answer 1

是的，组件有两个属性 nextLabel 和 backLabel。

https://primefaces.github.io/primefaces/7_0/#/components/wizard?id=attributes

nextLabel   null    String  Label of next navigation button.
backLabel   null    String  Label of back navigation button.

然后做..

<p:wizard widgetVar="wgtWizard" nextLabel="Next #{component.step}" backLabel="Back #{component.step}">

但是由于 #component.step 并不是在每一步都被评估，所以你必须使用 JQuery JS 代码来完成它，如下所示：

var wizard = PF('wgtWizard');
var stepIndex = wizard.getStepIndex(wizard.currentStep);
wizard.nextNav.find('.ui-button-text').text('Next ' + stepIndex);
wizard.backNav.find('.ui-button-text').text('Back ' + (stepIndex-1));

只需在向导 'onback' 和 'onnext' JS 方法上执行该 JS 代码。

Primefaces 向导自定义 back/next 按钮标签

Primefaces Wizard custom back/next button label

label

button

wizard

primefaces