Перемещение кнопок навигации в p:wizard

Я хочу разместить кнопки навигации прямо под заголовками шагов компонента мастера простых лиц:

Так как Primefaces генерирует плитки шагов и содержимое мастера вместе, я не был уверен, как вставить элемент (в данном случае кнопки навигации) между двумя частями компонента мастера. Во всяком случае, чтобы сделать это?

Спасибо :)


button wizard position jsf primefaces
person user2546267    schedule 01.08.2013    source источник

Ответы (2)


arrow_upward
15
arrow_downward

Самое простое решение — настроить мастер так, чтобы кнопки навигации не отображались, а затем создать собственную кнопку:

<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, но, на мой взгляд, так сложнее.

Изменить :-

Для Primeface5.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();" />
person patstuart    schedule 02.08.2013
comment
да, я пробовал это, но как я могу разместить эти кнопки прямо под заголовками шагов? - person user2546267; 02.08.2013
comment
Спасибо! Однако мне пришлось разместить эти кнопки прямо под каждой вкладкой. Не прямо под мастером. - person user2546267; 03.08.2013
comment
В PrimeFaces 5.1 правильное поведение для onclick — PF('myWizard').back(). В противном случае myWizard не распознается. - person nucandrei; 15.11.2014

arrow_upward
1
arrow_downward

Я знаю, что вопрос немного устарел, но, возможно, это поможет кому-то. В дополнение к ответу patstuart (отличный, который мне очень помог, +1) вы можете поместить эти элементы управления в div с помощью CSS следующим образом:

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

Я использую его для позиционирования кнопок в нижней части моих диалогов.

person iozee    schedule 28.08.2014