Препозициониране на бутоните за навигация в p:wizard

Искам да поставя бутоните за навигация точно под заглавията на стъпките на компонента съветник за primefaces:

Тъй като 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, но според мен по този начин е по-трудно.

Редактиране:-

За Primefaces 5.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