如何創建步驟之間平滑過渡的多步驟表單？

使用jQuery（以及如果需要的CSS3），如何創建一個多步驟形式，並在步驟之間平滑過渡？如何創建步驟之間平滑過渡的多步驟表單？

例如，如果我有這樣的三步形式，如何平滑步驟之間的轉換？

//shows #form_part{n} and hides the other parts 
 
function shows_form_part(n){ 
 

 
    var i = 1, p = $("#form_part"+(i).toString()); 
 
    while (p.length != 0){ 
 

 
     if (i == n){ 
 
      p.show(); 
 
     } 
 
     else{ 
 
      p.hide();   
 
     } 
 
     i++; 
 
     p = $("#form_part"+(i).toString()); 
 
    } 
 

 
} 
 

 
//change accordingly, just an example 
 
function submit_form() { 
 
    var sum = Number($("#num1").val()) + 
 
      Number($("#num2").val()) + 
 
      Number($("#num3").val()); 
 
    alert("The sum result is: " + sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onload="shows_form_part(1)"> 
 
<form> 
 
    <div id="form_part1"> 
 
    Part 1<br> 
 
    <input type="number" value="1" id="num1"><br> 
 
    <!--form elements 1--> 
 
    <button type="button" onclick="shows_form_part(2)">&raquo;</button> 
 
    </div> 
 
    <div id="form_part2"> 
 
    Part 2<br> 
 
    <input type="number" value="2" id="num2"><br> 
 
    <!--form elements 2--> 
 
    <button type="button" onclick="shows_form_part(1)">&laquo;</button> 
 
    <button type="button" onclick="shows_form_part(3)">&raquo;</button> 
 
    </div> 
 
    <div id="form_part3"> 
 
    Part 3<br> 
 
    <!--form elements 3--> 
 
    <input type="number" value="3" id="num3"><br> 
 
    <button type="button" onclick="shows_form_part(2)">&laquo;</button> 
 
    <button type="button" onclick="submit_form()">Sum</button> 
 
    </div> 
 
</form> 
 
</body>

來源

2017-05-07 João Pimentel Ferreira

@LGSon，我提出這個問題，我給的答覆從一開始，以幫助社區。無論如何，我在你提到的時候編輯了這個問題。 –

收回我的讚譽:) ......你可能已經明白了，如果你打算回答自己的問題並不重要，它需要寫得恰當。 – LGSon

的方式來實現，其在jQuery的方法.show(speed)和.hide(speed)每種形式步驟div使用的參數。速度參數可以是"slow"，"fast"或轉換的時間（以毫秒爲單位）。

然後需要一個函數來顯示和隱藏相應的表單步驟div s。以下功能僅顯示#form_part{n}並隱藏其他表單部件。在HTML部分，一個只需要具有各種形式一步div有序與id="form_part{n}"命名，即form_part1，form_part2等

//shows #form_part{n} and hides the other parts 
 
function shows_form_part(n){ 
 

 
    var i = 1, p = $("#form_part"+(i).toString()); 
 
    while (p.length != 0){ 
 

 
     if (i == n){ 
 
      p.show("slow"); 
 
     } 
 
     else{ 
 
      p.hide("slow");   
 
     } 
 
     i++; 
 
     p = $("#form_part"+(i).toString()); 
 
    } 
 

 
} 
 

 
//change accordingly, just an example 
 
function submit_form() { 
 
    var sum = Number($("#num1").val()) + 
 
      Number($("#num2").val()) + 
 
      Number($("#num3").val()); 
 
    alert("The sum result is: " + sum); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onload="shows_form_part(1)"> 
 
<form> 
 
    <div id="form_part1"> 
 
    Part 1<br> 
 
    <input type="number" value="1" id="num1"><br> 
 
    <!--form elements 1--> 
 
    <button type="button" onclick="shows_form_part(2)">&raquo;</button> 
 
    </div> 
 
    <div id="form_part2"> 
 
    Part 2<br> 
 
    <input type="number" value="2" id="num2"><br> 
 
    <!--form elements 2--> 
 
    <button type="button" onclick="shows_form_part(1)">&laquo;</button> 
 
    <button type="button" onclick="shows_form_part(3)">&raquo;</button> 
 
    </div> 
 
    <div id="form_part3"> 
 
    Part 3<br> 
 
    <!--form elements 3--> 
 
    <input type="number" value="3" id="num3"><br> 
 
    <button type="button" onclick="shows_form_part(2)">&laquo;</button> 
 
    <button type="button" onclick="submit_form()">Sum</button> 
 
    </div> 
 
</form> 
 
</body>

測試在這裏。它的工作原理:)

來源

2017-05-07 12:35:57

你可以這樣做：

$(document).ready(function() { 
 
    var navListItems = $('div.setup-panel div a'), 
 
      allWells = $('.setup-content'), 
 
      allNextBtn = $('.nextBtn'); 
 

 
    allWells.hide(); 
 

 
    navListItems.click(function (e) { 
 
     e.preventDefault(); 
 
     var $target = $($(this).attr('href')), 
 
       $item = $(this); 
 

 
     if (!$item.hasClass('disabled')) { 
 
      navListItems.removeClass('btn-primary').addClass('btn-default'); 
 
      $item.addClass('btn-primary'); 
 
      allWells.hide(); 
 
      $target.show(); 
 
      $target.find('input:eq(0)').focus(); 
 
     } 
 
    }); 
 

 
    allNextBtn.click(function(){ 
 
     var curStep = $(this).closest(".setup-content"), 
 
      curStepBtn = curStep.attr("id"), 
 
      nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"), 
 
      curInputs = curStep.find("input[type='text'],input[type='url']"), 
 
      isValid = true; 
 

 
     $(".form-group").removeClass("has-error"); 
 
     for(var i=0; i<curInputs.length; i++){ 
 
      if (!curInputs[i].validity.valid){ 
 
       isValid = false; 
 
       $(curInputs[i]).closest(".form-group").addClass("has-error"); 
 
      } 
 
     } 
 

 
     if (isValid) 
 
      nextStepWizard.removeAttr('disabled').trigger('click'); 
 
    }); 
 

 
    $('div.setup-panel div a.btn-primary').trigger('click'); 
 
});

body { 
 
    margin-top:40px; 
 
} 
 
.stepwizard-step p { 
 
    margin-top: 10px; 
 
} 
 
.stepwizard-row { 
 
    display: table-row; 
 
} 
 
.stepwizard { 
 
    display: table; 
 
    width: 50%; 
 
    position: relative; 
 
} 
 
.stepwizard-step button[disabled] { 
 
    opacity: 1 !important; 
 
    filter: alpha(opacity=100) !important; 
 
} 
 
.stepwizard-row:before { 
 
    top: 14px; 
 
    bottom: 0; 
 
    position: absolute; 
 
    content: " "; 
 
    width: 100%; 
 
    height: 1px; 
 
    background-color: #ccc; 
 
    z-order: 0; 
 
} 
 
.stepwizard-step { 
 
    display: table-cell; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
.btn-circle { 
 
    width: 30px; 
 
    height: 30px; 
 
    text-align: center; 
 
    padding: 6px 0; 
 
    font-size: 12px; 
 
    line-height: 1.428571429; 
 
    border-radius: 15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="container"> 
 
    
 
<div class="stepwizard col-md-offset-3"> 
 
    <div class="stepwizard-row setup-panel"> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a> 
 
     <p>Step 1</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a> 
 
     <p>Step 2</p> 
 
     </div> 
 
     <div class="stepwizard-step"> 
 
     <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a> 
 
     <p>Step 3</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    
 
    <form role="form" action="" method="post"> 
 
    <div class="row setup-content" id="step-1"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 1</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">First Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter First Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Last Name</label> 
 
      <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Last Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Address</label> 
 
      <textarea required="required" class="form-control" placeholder="Enter your address" ></textarea> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-2"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 2</h3> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Name</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Name" /> 
 
      </div> 
 
      <div class="form-group"> 
 
      <label class="control-label">Company Address</label> 
 
      <input maxlength="200" type="text" required="required" class="form-control" placeholder="Enter Company Address" /> 
 
      </div> 
 
      <button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row setup-content" id="step-3"> 
 
     <div class="col-xs-6 col-md-offset-3"> 
 
     <div class="col-md-12"> 
 
      <h3> Step 3</h3> 
 
      <button class="btn btn-success btn-lg pull-right" type="submit">Submit</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
    
 
</div>

來自實例：http://bootsnipp.com/snippets/e3MBM

來源

2017-05-07 12:42:40

謝謝，但步驟之間沒有平滑的過渡。 –

idk爲什麼它不在這裏工作，但看看這裏：http://bootsnipp.com/snippets/e3MBM –

我看到了鏈接，並沒有平穩過渡 –

如何創建步驟之間平滑過渡的多步驟表單？

回答

相關問題