帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery多步骤表单完成进度条插件

帝国模板之家 2020-11-16 网页特效 评论

Book.js是一个表单完成进度jquery插件,它将HTML表单转换为带有步骤的滑动向导界面。兼容Bootstrap框架,允许在导航到下一步之前使用jqueryvalidate插件验证用户输入。

使用方法:

1. 在html文档中加载所需的jQuery库和jqueryui(用于动画和简化功能)。

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>

2.加载表单验证插件。

<script src="jquery.validate.min.js"></script>

3. 加载jquery-book.js插件文件。

<script src="jquery-book.js"></script>

4. 创建表单向导HTML结构代码,如下所示:

<form name="demo" id="demo" class="myBook">
  <section>
    <label for="fname">First name:</label><br>
    <input type="text" id="fname" name="fname" class="form-control" placeholder="John" required><br>
    <label for="lname">Last name:</label><br>
    <input type="text" id="lname" name="lname" class="form-control" placeholder="Doe" required><br><br>
    <button type="button" class="page-next btn btn-primary">Next</button>
  </section>
  <section>
    <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" >
    <label for="vehicle1"> I have a bike</label><br>
    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
    <label for="vehicle2"> I have a car</label><br>
    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
    <label for="vehicle3"> I have a boat</label><br/><br>
    <button type="button" class="page-prev btn btn-danger">Prev</button>
    <button type="button" class="page-next btn btn-primary">Next</button>
  </section>
  <section class="page">
    <a href="#">Terms of Service</a><br/>
    <input type="checkbox" id="ts" name="ts" value="1" required>
    <label for="ts"> I agree</label><br>
    <button type="button" class="page-prev btn btn-danger">Prev</button>
    <button type="submit" class="page-next btn btn-success" id="sendForm">Complete</button>
  </section>
  <section class="page" style="margin:auto;text-align:center">
    Your form has been submitted.
  </section>
</form>

5. 初始化插件

$thing = $('#demo').book({
  onPageChange: updateProgress,
  speed:200}
).validate();

6. 创建一个自定义进度条,可视化您正在查看的步骤。

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%;">
    <div class="progress-value">0%</div>
  </div>
</div>

切换方法

/* Update progress bar whenever the page changes */
function updateProgress(prevPageIndex, currentPageIndex, pageCount, pageName){
  t = (currentPageIndex / (pageCount-1)) * 100;
  $('.progress-bar').attr('aria-valuenow', t);
  $('.progress-bar').css('width', t+'%');
  //$('.progress span').text('Completed: '+Math.trunc(t)+'%');
  $('.progress-value').text(Math.trunc(t)+'%');
}

样式文件

.progress {position:relative; }
.progress span {
  position:absolute;
  left:0;
  width:100%;
  text-align:center;
  z-index:2;
  font-weigh:bold;
}

.progress{
  height: 25px;
  background: #262626;
  padding: 5px;
  overflow: visible;
  border-radius: 20px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #7992a8;
  margin-top: 50px;
}

.progress .progress-bar{
  border-radius: 20px;
  position: relative;
  animation: animate-positive 2s;
}

.progress .progress-value{
  display: block;
  padding: 3px 7px;
  font-size: 13px;
  color: #fff;
  border-radius: 4px;
  background: #191919;
  border: 1px solid #000;
  position: absolute;
  top: -40px;
  right: -10px;
}

.progress .progress-value:after{
  content: "";
  border-top: 10px solid #191919;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  position: absolute;
  bottom: -6px;
  left: 26%;
}

.progress-bar.active{
  animation: reverse progress-bar-stripes 0.40s linear infinite, animate-positive 2s;
}

@-webkit-keyframes animate-positive{
  0% { width: 0; }
}

@keyframes animate-positive{
  0% { width: 0; }
}

会员登陆后即可下载资源文件。更多好用网站特效插件,请关注帝国模板之家

这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言