創建jquery 3步註冊

Question

我正在尋找最好的解決方案，在1頁上創建3步註冊過程。我目前使用jQuery循環，並且在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

你可以使用顯示（）/隱藏（）或淡入（）/三個獨立的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的底部也給出了一些其他方法。