Bootstrap Wizard 多步表单控件

最新推荐文章于 2024-08-01 15:36:07 发布

weixin_34235457

最新推荐文章于 2024-08-01 15:36:07 发布

阅读量1.2k

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/xlpapapa/blog/1834680

版权

这篇博客介绍了如何利用Bootstrap Wizard插件实现多步表单功能，包括表单验证、步骤切换及提交。通过引入相关CSS和JS文件，设置选项、事件和方法，可以创建出美观的多步交互表单。提供了官方文档链接和演示示例。

摘要由CSDN通过智能技术生成

2019独角兽企业重金招聘Python工程师标准>>>

废话

有一块需求是有多步表单点击下一步时触发验证一个范围内的表单，点击上一步或取消，清空表单并返回第一步，点击最后一步提交整个表单的

就找到了这个插件，本来自己写了一个原生的 form+table 点击下一步隐藏所有table 显示当前步骤table的控件，但是老大说丑，嗯哼就找了这个。

github上的地址，其实已经有很明确的官方文档了：

https://github.com/VinceG/twitter-bootstrap-wizard

2.可能不是废话

首先要按顺序引入css文件和js文件

<link rel="stylesheet" type="text/css" media="screen" href="${ctx }/resources/css/bootstrap.min.css" />
<script src="${ctx }/resources/js/jquery-2.2.4.min.js"></script>
<script src="${ctx }/resources/js/bootstrap.min.js"></script>
<script src="${ctx }/resources/js/jquery.bootstrap.wizard.min.js"></script>

先放页面的代码

<div class="group ui-corner-all"style="text-align:center">
<div class="col-md-8 eq-box-md eq-no-panel col-center-block">
<div class="panel">

<!-- Classic Form Wizard -->
<!--===================================================-->
<div id="demo-cls-wz">					
<!--Nav-->
<ul class="wz-nav-off wz-icon-inline wz-classic">
<li class="col-xs-6 bg-info active">
<a data-toggle="tab" href="#demo-cls-tab1" aria-expanded="true">
   		     第一步
    </a>
</li>
<li class="col-xs-6 bg-info">
    <a data-toggle="tab" href="#demo-cls-tab2" aria-expanded="false">
		        第二步
    </a>
</li>
</ul>

<!--Progress bar-->
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-dark" style="width: 50%;"></div>
</div>


<!--Form-->
<form class="form-horizontal mar-top">
<div class="panel-body">
    <div class="tab-content">

        <!--First tab-->
        <div id="demo-cls-tab1" class