创建jQuery 3步骤注册 [英] Creating jquery 3 step sign up

问题描述

我正在寻找在1页上创建3步注册过程的最佳解决方案.我目前正在使用jquery循环，在告诉它滑动时，版本1.3.2中使用的技术不起作用，似乎仅在1.3.1中有效，还有一个问题是尺寸，幻灯片3更长比幻灯片1高，它产生的高度太高了，没有死角.

I am looking for the best solution to create a 3 step sign up process on 1 page. I am currently using jquery cycle, and the techniques being used in version 1.3.2 do not work when telling it to slide, it seems to work only in 1.3.1, there is also a issue of the size, slide 3 is much longer than slide 1 and the height it generates is too tall with dead space.

有人知道一个简单的jquery解决方案吗?在这种情况下，UI选项卡可以工作吗?

Does anyone know of a simple jquery solution? Can the UI tabs work in this case?

这是我目前正在使用的

我想找到一种做某事的简短方法，也许不使用循环.

I would like to find a shorter way to do somethings and and perhaps not use cycle.

$('#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');
          }
     }

推荐答案

对于不同的表单部分，您可以将show()/hide()或fadeIn()/fadeOut()组合与三个单独的DIV容器一起使用.

You could use show()/hide() or fadeIn()/fadeOut() combinations with three separate DIV containers for the different form sections.

然后，您可以在每个部分中都有一个按钮，以对下一个部分执行淡入/淡入:

You could then have a button in each section bound to perform a fade-out/fade-in for the next section:

<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;
  });
});

这篇关于创建jQuery 3步骤注册的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！