循序渐进的表单进度/向导插件 - jQuery 表单滑块

循序渐进的表单进度/向导插件 - jQuery 表单滑块

版本:

浏览量:251

最后更新:2021-09-06

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

Form Slider是一个 jQuery 插件,可帮助您创建一个用户友好的分步式表单向导,其中集成了字段验证和进度条。

如何使用它:

1. 将表单组作为步骤添加到表单向导。

<form id="example">
 
  <!-- Step 1 -->
  <div class="step">
    <label>
      Username <br>
      <input name="name" required>
    </label>
 
    <label>Email <br>
      <input name="email" required>
    </label>
  </div>
 
  <!-- Step 2 -->
  <!-- Notice the inputs in this group have `data-set-group` attributes that will be used to alter the course of progression-->
  <div class="step">
    <Label>Group A
      <input data-set-group="group-a" type="radio" name="important_choice" value="somevalue" required>
    </label>
 
    <Label>Group B
      <input data-set-group="group-b" type="radio" name="important_choice" value="somevalue" required>
    </label>
  </div>
 
  <!-- This would be interpreted as step 1 of "group-a" , and overall the 3rd step of the entire progression if "Group A" was chosen by the user -->
  <div class="step" data-group="group-a">
      <label>Group A Question One:</label>
      <input name="group_a_answer" placeholder="Place your answer here" required>
  </div>
 
  <!-- This would be interpreted as step 1 of "group-b" , and overall the 3rd step of the entire progression if "Group B" was chosen by the user -->
  <div class="step" data-group="group-b">
      <label>Group B Question One</label>
      <input name="group_b_answer" required>
  </div>
 
  <!-- This would be interpreted as step 2 of "group-b" , and overall the 4th step of the entire progression if "Group B" was chosen by the user -->
  <div class="step" data-group="group-b">
      <label>Group B Question Two</label>
      <input name="group_b_answer" placeholder="Place your answer here" required>
  </div>
 
  <!-- Last Step -->
  <div class="step">
     <label>Press Submit to Complete Form</label>
  </div>
 
</form>

2. 向表单向导添加导航和提交按钮。

<div class="buttons">
  <button type="button" class="back">Back</button>
  <button type="button" class="next">Next</button>
  <button type="submit" class="submit">Submit</button>
</div>

3. 创建一个进度条来指示您正在查看的步骤。

<div class="progress-bar"></div>

4. 隐藏页面 init 上的所有步骤。

.step,
.back,
.submit {
  display:none;
}

5.在文档中加载需要的jQuery库和jquery-validation插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/cdn/jquery.vali<a href="https://www.jqueryscript.net/time-clock/">date</a>.min.js"></script>

6. 初始化表单滑块插件并完成。

jQuery(document).ready(function() {
  formSlider.init('#example');
});

变更日志:

2021-07-07

  • 错误修正

2021-07-04

  • 更新 jquery.form-slider.js

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。