PrimeFaces onclick 버튼의 탭을 변경하는 방법은 무엇입니까?

안녕 얘들 아 프라임 얼굴에 다음 버튼을 추가하고 사용자가 다음 버튼을 클릭하면 tabview에서 탭을 변경하는 가능한 방법 .....PrimeFaces onclick 버튼의 탭을 변경하는 방법은 무엇입니까?

내가 뭘하고있는 건지 등록 프로세스이고 나는 주변에있어. 6 개의 탭은 프라임 페이스에서 tabview 옵션을 사용하여 만들었습니다. 사용자가 다음 버튼을 클릭 할 때 탭이 변경되도록 하단과 하단의 두 개의 단추가 필요합니다. 여기

이 이해

<!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%; 
    }

사용자가 다음 버튼을 클릭 할 때 다음 탭을 변경하고 이전 버튼을 클릭 할 때 이전 탭을 변경하는 데 도움이되는 두 개의 버튼입니다. 이 가능합니다. 예를 들어,

출처

2013-12-16 Vicky

당신은 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(); 
    } 
} 
}

출처

2013-12-16 09:27:14 nosnhoj

감사 것은 내가하지 않는 것입니다 내 서버에 연결하고 싶습니다.이 모든 것이 클라이언트 측에서 일어날 때까지 제가 마지막 탭에 도달 할 때까지 제가 제출하고 서버에 연결할 때까지 기다려야합니다. 서버를 사용하거나 참조하지 않고이 작업을 수행 할 수있는 다른 방법이 있습니까? – Vicky

PrimeFaces onclick 버튼의 탭을 변경하는 방법은 무엇입니까?

답변

관련 문제