Bootstrap Wizard 多步表单控件

原创
2018/06/24 10:45
阅读数 2.9K
  1. 废话

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

就找到了这个插件,本来自己写了一个原生的 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="tab-pane active in">
            <div class="form-group">
                <label class="col-lg-3 control-label">XX代码</label>
                <div class="col-lg-7">
                    <input type="text" class="form-control" name="username" placeholder="Username">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">企业代码</label>
                <div class="col-lg-7">
                    <input type="email" class="form-control" name="email" placeholder="Email">
                </div>
            </div>
             <div class="form-group">
                <label class="col-lg-3 control-label">XX经办人</label>
                <div class="col-lg-7">
                    <input type="text" placeholder="First name" name="firstName" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <label class="col-lg-3 control-label">XX经办人联系电话</label>
                <div class="col-lg-7">
                    <input type="text" placeholder="Last name" name="lastName" class="form-control">
                </div>
            </div>
             <div class="form-group">
                <label class="col-lg-3 control-label">BB联系人</label>
                <div class="col-lg-7">
                    <input type="text" placeholder="Address" name="address" class="form-control">
                </div>
            </div>
             <div class="form-group">
                <label class="col-lg-3 control-label">BB联系电话</label>
                <div class="col-lg-7">
                    <input type="text" placeholder="Address" name="address" class="form-control">
                </div>
            </div>
        </div>

        <!--Second tab-->
        <div id="demo-cls-tab2" class="tab-pane fade">
            <div class="form-group">
                <label class="col-lg-3 control-label">报告资料</label>
                <div class="col-lg-7">
                <input class="form-control" type="file" name="" id="file"  accept="image/jpg, image/jpeg" onchange="xmTanUploadImg(this)"/>
                    <span id="opt">
                        <a href="javascript:preview();" id="preview" >预览</a>
    					<input type="button" value="删除" id="delBtn"/>
					</span>
                </div>
            </div>
        </div>
    </div>
</div>


<!--Footer button-->
<div class="panel-footer text-right">
    <div class="box-inline">
        <button type="button" class="previous btn btn-mint disabled">取消</button>
        <button type="button" class="next btn btn-mint" style="display: inline-block;">下一步</button>
        <button type="button" class="btn btn-warning" style="display: none;">上传</button>
        <button type="button" class="finish btn btn-mint" onclick="fb()" style="display: none;">提交</button>
    </div>
</div>
</form>
</div>
<!--===================================================-->
<!-- End Classic Form Wizard -->

再放js初始化的代码

  // =================================================================
$(function(){   
 $('#demo-cls-wz').bootstrapWizard({
        tabClass		: 'wz-classic',
        nextSelector	: '.next',
        progressBarCurrent: true,
        previousSelector	: '.previous',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        //下一步事件绑定 index 从0开始
        onNext:function(tab, navigation, index){
        	if(index == 1){
        	//检验表单
        	
        	}
        },
        onPrevious:function(){
        	 if(confirm("是否放弃申请?")){
                    $("#form")[0].reset();
                    return true;	
                }else{
                	return false;
                }
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var $percent = ($current/$total) * 100;
            var wdt = 100/$total;
            var lft = wdt*index;
            $('#demo-cls-wz').find('.progress-bar').css({width:$percent+'%'});

            // If it's the last tab then hide the last button and show the finish instead
            if($current >= $total) {
                $('#demo-cls-wz').find('.next').hide();
                $('#demo-cls-wz').find('.finish').show();
            } else {
                $('#demo-cls-wz').find('.next').show();
            }
        }
    });
})

最后的效果就是这样子的

 

============然后勒,官网还提供了一个demo,属性、触发事件和方法=====

http://vinceg.github.io/twitter-bootstrap-wizard/


//官网给的初始化插件的方法
$(document).ready(function() {
	$('#rootwizard').bootstrapWizard();
});
//初始化时带上初始参数并且绑定事件
$(document).ready(function() {
	$('#rootwizard').bootstrapWizard({
		tabClass: 'nav nav-pills',
        //绑定点击下一步的事件,传入参数为面板tab,标题头navigation,步骤序号index(从0开始)
		onNext: function(tab, navigation, index) {
			alert('next');
  		}
  });
});
//调用方法 此处为展示 第三步的tab
$('#rootwizard').bootstrapWizard('show',3);

偷文档

Options

Key Default Description
withVisible true Find only visible li step elements. Set to `false` if your steps display is hidden.
tabClass 'nav nav-pills' ul navigation class
nextSelector '.wizard li.next' next element selector
previousSelector '.wizard li.previous' previous element selector
firstSelector '.wizard li.first' first element selector
lastSelector '.wizard li.last' last element selector
backSelector '.wizard li.back' back element selector
finishSelector '.wizard li.finish' finish element selector

Events

Key Description
onInit Fired when plugin is initialized
onShow Fired when plugin data is shown
onNext Fired when next button is clicked (return false to disable moving to the next step)
onPrevious Fired when previous button is clicked (return false to disable moving to the previous step)
onFirst Fired when first button is clicked (return false to disable moving to the first step)
onLast Fired when last button is clicked (return false to disable moving to the last step)
onBack Fired when back button is clicked (return false to disable moving backwards in navigation history)
onFinish Fired when finish button is clicked (return value is irrelevant)
onTabChange Fired when a tab is changed (return false to disable moving to that tab and showing its contents)
onTabClick Fired when a tab is clicked (return false to disable moving to that tab and showing its contents)
onTabShow Fired when a tab content is shown (return false to disable showing that tab content)

Methods

Key Parameters Description
next   Moves to the next tab
previous   Moves to the previous tab
first   Jumps to the first tab
last   Jumps to the last tab
back   Moves back in navigation history by jumping to the former tab
finish   "Finishes" the wizard by calling onFinish callback
show zero based index or tab target id Jumps to the specified tab
currentIndex   Returns the zero based index number for the current tab
navigationLength   Returns the number of tabs
enable zero based index Enables a tab, allows a user to click it (removes .disabled if the item has that class)
disable zero based index Disables a tab, disallows a user to click it (adds .disabled to the li element)
display zero based index Displays the li element if it was previously hidden
hide zero based index Hides the li element (will not remove it from the DOM)
remove zero based index, optinal bool remove tab-pane element or not false by default Removes the li element from the DOM if second argument is true will also remove the tab-pane element
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部