创建jQuery 3步骤注册

本文介绍了创建jQuery 3步骤注册的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在寻找在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; }); });