jquery 만들기 3 단계 가입

Question

1 페이지에서 3 단계 가입 프로세스를 만드는 가장 좋은 해결책을 찾고 있습니다. 현재 jquery cycle을 사용하고 있으며 1.3.2 버전에서 사용되는 기술이 슬라이드에 표시 될 때 작동하지 않습니다. 1.3.1 버전에서만 작동하는 것으로 보입니다. 또한 슬라이드 3의 크기가 더 깁니다. 슬라이드 1보다 커서 생성 된 높이가 너무 커서 데드 스페이스가 큽니다.

누구나 간단한 jquery 솔루션을 알고 있습니까? 이 경우 UI 탭을 사용할 수 있습니까? 나는 현재

를 사용하고 난 일도 할 수있는 짧은 방법을 찾아 좋아하고 아마도주기를 사용하지 않을 것을

이입니다.

$('#signup-content').cycle({fx: 'scrollHorz', timeout: 0, speed: 300, after: onComp, startingSlide:0}); 
    $("#createAccount").validate({ 
     meta: "validate", 
     errorElement: "em", 
       errorClass: "error", 
     validClass: "success", 
     highlight: function(element, errorClass, validClass) { 
      $(element).closest("div.required").removeClass(validClass); 
      $(element).closest("div.required").addClass(errorClass); 
      $(element).addClass(errorClass); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
      $(element).closest("div.required").removeClass(errorClass); 
      $(element).closest("div.required").addClass(validClass); 
      $(element).removeClass(errorClass); 
     }, 
     errorPlacement: function(error, element) { 
      if (element.attr("name") == "month" 
       || element.attr("name") == "day" 
        || element.attr("name") == "year") 
      error.insertAfter("#year"); 
      else 
      error.addClass("hide"); 
     }, 
     debug:true, 

     groups: { 

      birthday: "month day year" 
     }, 

     rules: { 

      firstname:{required:true}, 
      lastname:{required:true}, 
      email: {required: true, email: true}, 
      confirm_email: {required: true, equalTo: "#email"}, 
      password:{required: true}, 
      confirm_password:{required: true,equalTo: "#password"}, 
      zipcode: {required:true, min:5}, 
      month:{required:true}, 
      day:{required:true}, 
      year:{required:true}, 
      gender:{required:true}, 
      agree:{required:true} 

     }, 
     messages: { 
     month: { 
      required: "Month Is Missing" 
     }, 
     day: { 
      required: "Day Is Missing" 
     }, 
     year: { 
      required: "Year Is Missing" 
     } 

     }, 


     submitHandler: function(form) { 
      $(form).ajaxSubmit({ 
      beforeSubmit: showRequest, 
      success: showResponse 
      }); 
    } 
}) 

function showRequest(formData, jqForm, options) { 
    // formData is an array; here we use $.param to convert it to a string to display it 
    // but the form plugin does this for you automatically when it submits the data 
    var queryString = $.param(formData); 

    // jqForm is a jQuery object encapsulating the form element. To access the 
    // DOM element for the form do this: 
    // var formElement = jqForm[0]; 


    alert('About to submit: \n\n' + queryString); 

    // here we could return false to prevent the form from being submitted; 
    // returning anything other than false will allow the form submit to continue 
    return true; 
} 


function showResponse(formData) { 

    $('#signup-content').cycle(1); 
    $('html, body').animate({scrollTop: '0px'}, 300); 
    $('#message-container').addClass("notice").append('<h3>Your Account Has Been Created!</h3><a href="javascript:;" id="close"><img src="/assets/images/close.png" alt="Close" title="Close"/></a>'); 
    $('#message-container').fadeIn(1200, function(){ 
    $('#close').click(function(){ 
     $('#message-container').fadeOut(1200); 

    }); 

    }); 
    return false; 

} 

    $('#goback-step2').click(function(){ 
      $('#signup-content').cycle(1); 
     $('html, body').animate({scrollTop: '0px'}, 300); 
     return false; 
    }); 
    $('#goto-step3').click(function(){ 
      $('#signup-content').cycle(2); 
      $('html, body').animate({scrollTop: '0px'}, 300); 
      return false; 
    }); 

    function onComp(curr, next, opts){ 
      var index = opts.currSlide; 
      if (index == 0){ 
       $('#step1').removeClass('complete'); 
       $('#step1').addClass('active').siblings('li').removeClass('active').addClass('inactive'); 
      } 
      else if (index == 1){ 
       $('#step1').addClass('complete'); 
       $('#step2').removeClass('complete'); 
       $('#step2').addClass('active'); 
       $('#step3').removeClass('active').addClass('inactive'); 
      } 
      else if (index == 2){ 
       $('#step2').addClass('complete'); 
       $('#step3').addClass('active').removeClass('inactive'); 
      } 
    } 

Answer 1

당신은 쇼를 사용할 수있다()/숨기기() 또는 fadeIn()/다른 형태의 섹션에 대한 별도의 세 가지 DIV 용기와 페이드 아웃() 조합.

그런 다음 페이드 아웃을 수행 할 수밖에 각 섹션에서 버튼을 가질 수

/페이드의 다음 섹션 :

이

<div id="section1"> 
    <!-- form here --> 
    <a href="#" id="step2">step2</a> 
</div> 
<div id="section2" style="display:none"> 
    <!-- drag drop here --> 
    <a href="#" id="step2">step2</a> 
</div> 
<div id="section3" style="display:none"> 
    <!-- search here --> 
</div> 

JQuery와 :

$(function() { 
    $('#step2').click(function() { 
    $('#section1').fadeOut(function() { 
     $('#section2').fadeIn(); 
    }); 
    return false; 
    }); 

    $('#step3').click(function() { 
    $('#section2').fadeOut(function() { 
     $('#section3').fadeIn(); 
    }); 
    return false; 
    }); 
}); 

Answer 2

멋진있다 jQuery 유효성 검사를 사용하는 3 파트 마법사 데모 here. 유효성 검사 부분은 접근법을 사용할 필요가 없지만 약간의 클라이언트 측 유효성 검사가 실제로 도움이 될 수 있습니다. this 하단에는 몇 가지 다른 접근법이 있습니다.