English 中文(简体)
第3步
原标题:Creating jquery 3 step sign up
  • 时间:2009-10-16 17:32:16
  •  标签:

我期待着找到最佳解决办法,在1页上启动3个步骤。 目前,我使用的是支气循环,第1.3.2版所用的技术在告诉它要滑坡时不会奏效,似乎只是在1.3.1年才奏效。 还有一个问题,即滑坡3比幻灯1要长得多,它产生的高空太大。

是否有任何人知道简单的分类解决办法? 律师事务所能否就此开展工作?

这是我目前使用的。

我想找到一种较短的方式来做一些事情,或许不能使用周期。

$( #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: 

  + 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 );
          }
     }
最佳回答

您可以使用显示()/hide()或 fadeIn()/fadeOut()的组合,为不同形式部分使用3个单独的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>

<>strong>jquery:

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

  $( #step3 ).click(function() {
    $( #section2 ).fadeOut(function() {
      $( #section3 ).fadeIn();
    });
    return false;
  });
});
问题回答

The s a nice 3-part wizard demo here that use jQuery Validation. 验证部分不必采用这一方法,但只有少数客户方的验证才能真正有用。 ,该也提供了其他一些方法。





相关问题
热门标签