大家好，有什么可能的方法可以在 prime faces 中添加下一个按钮，并在用户单击下一个按钮时更改 tabview 中的选项卡......
我正在做的是一个注册过程，我得到了大约 6 个标签，这些标签是我在 prime faces 中使用 tabview 选项制作的。我想要在底部有两个按钮 Next 和 Previous，这样当用户单击 next 按钮时，选项卡应该改变。我尝试了各种方法，但它根本不起作用，有人可以帮助我吗..
这是我的示例代码供您理解
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:rich="http://richfaces.org/rich">
<h:head>
<title> Registration</title>
<script src="Js/validator.js" type="text/javascript"/>
</h:head>
<h:body>
<h:form id="msform">
<center><h1>REGISTRATION</h1></center>
<p:tabView style="width: 900px;padding-top: 10px;position: relative;left:200px; background-color: seashell" id="tabView" >
<p:tab titleStyle="background-color: #F0E68C;" id="tab1" titleStyleClass="tabclick" title="Personal Info">
<p:fieldset>
</p:fieldset>
</p:tab>
<p:tab titleStyle="background-color: #DB7093" id="tab2" titleStyleClass="tabclick" title="Contact">
<p:fieldset>
</p:fieldset>
</p:tab>
<p:tab id="tab3" titleStyleClass="tabclick" titleStyle="background-color:#FFDAB9" title="College Education">
<p:fieldset>
</p:fieldset>
</p:tab>
<p:tab id="tab4" titleStyleClass="tabclick" titleStyle="background-color: #87CEEB" title="School Education">
<p:fieldset>
</p:fieldset>
</p:tab>
<p:tab id="tab5" titleStyleClass="tabclick" titleStyle="background-color: #F08080" title="Work Preference">
<p:fieldset>
</p:fieldset>
</p:tab>
<p:tab id="tab6" titleStyleClass="tabclick" titleStyle="background-color: #9ACD32" title="Finish">
<p:fieldset>
</p:fieldset>
</p:tab>
</p:tabView>
</h:form>
</h:body>
</html>
我的 CSS
html {
background: url(../images/bluebg4.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#msform fieldset {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 100%;
}
我想要的是两个按钮，可以帮助我的用户在单击下一步按钮时更改下一个选项卡，在单击上一个按钮时更改上一个选项卡。 这可能吗 。 请提前帮助谢谢...
最佳答案
您可以检查primefaces showcases 的“向导” ，例如:
<h:form>
<p:wizard flowListener="#{userWizard.onFlowProcess}">
<p:tab id="personal" title="Personal">
<p:panel header="Personal Details">
<h:messages errorClass="error"/>
<h:panelGrid columns="2" columnClasses="label, value" styleClass="grid">
<h:outputText value="Firstname: *" />
<p:inputText required="true" label="Firstname"
value="#{userWizard.user.firstname}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="address" title="Address">
<p:panel header="Adress Details">
<h:messages errorClass="error"/>
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="City: " />
<p:inputText value="#{userWizard.user.city}" />
<h:outputText value="Skip to last: " />
<h:selectBooleanCheckbox value="#{userWizard.skip}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="contact" title="Contact">
<p:panel header="Contact Information">
<h:messages errorClass="error"/>
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Email: *" />
<p:inputText required="true" label="Email"
value="#{userWizard.user.email}" />
</h:panelGrid>
</p:panel>
</p:tab>
<p:tab id="confirm" title="Confirmation">
<p:panel header="Confirmation">
<h:panelGrid id="confirmation" columns="6">
<h:outputText value="Firstname: " />
<h:outputText styleClass="outputLabel"
value="#{userWizard.user.firstname}" />
<h:outputText value="City: " />
<h:outputText styleClass="outputLabel"
value="#{userWizard.user.city}" />
<h:outputText value="Email: " />
<h:outputText styleClass="outputLabel"
value="#{userWizard.user.email}" />
</h:panelGrid>
<p:commandButton value="Submit" update="growl"
actionListener="#{userWizard.save}"/>
</p:panel>
</p:tab>
</p:wizard>
public class UserWizard {
private User user = new User();
private boolean skip;
private static Logger logger = Logger.getLogger(UserWizard.class.getName());
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public void save(ActionEvent actionEvent) {
//Persist user
FacesMessage msg = new FacesMessage("Successful", "Welcome :" + user.getFirstname());
FacesContext.getCurrentInstance().addMessage(null, msg);
}
public boolean isSkip() {
return skip;
}
public void setSkip(boolean skip) {
this.skip = skip;
}
public String onFlowProcess(FlowEvent event) {
logger.info("Current wizard step:" + event.getOldStep());
logger.info("Next step:" + event.getNewStep());
if(skip) {
skip = false; //reset in case user goes back
return "confirm";
}
else {
return event.getNewStep();
}
}
}
关于javascript - 如何更改 PrimeFaces onclick 按钮中的选项卡？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20604364/