个人中心
gpt4 book ai didi

javascript - 如何更改 PrimeFaces onclick 按钮中的选项卡？

转载 作者：太空宇宙 更新时间：2023-11-03 18:27:03 25 4
gpt4 key购买 nike

大家好，有什么可能的方法可以在 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/

25 4 0
文章推荐： python - 将 1x336 数组转换为 16x21 数组
文章推荐： html - 纯 css3 图像 slider
文章推荐： Javascript:不修改 slider 函数中的全局变量
文章推荐： css - 表格单元格上的绝对元素
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com