bootstrap导航插件wizard--源码demo

最近一段时间一直忙于工作，没有时间整理bootstrap导航插件。

今天把用到的导航插件demo，贴出来和大家一起学习。

1.  ftl页面部分代码，贴出主要代码

<div class="portlet-body form" id="form">

<div class="form-wizard">
<div class="form-body">
<ul class="nav nav-pills nav-justified steps" id="cite_ul_id">
<li>
<a href="#subjec1" data-toggle="tab" class="step">
<span class="number">
1 </span>
<span class="desc">
<i class="fa fa-check"></i>主题1</span>
</a>
</li>
<li>
<a href="#subjec2" data-toggle="tab" class="step">
<span class="number">
2 </span>
<span class="desc">
<i class="fa fa-check"></i>主题2</span>
</a>
</li>
<li>
<a href="#subjec3" data-toggle="tab" class="step">
<span class="number">
3 </span>
<span class="desc">
<i class="fa fa-check"></i>主题3</span>
</a>
</li>
</ul>
<!-- 进度条 -->
<div id="bar" class="progress progress-striped" role="progressbar">
<div class="progress-bar progress-bar-success">
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="subjec1">
<#include "subjec1.ftl"/>
</div>
<div class="tab-pane" id="subjec2">
<#include "subjec2.ftl"/>
</div>
<div class="tab-pane" id="subjec3">
<#include "subjec3.ftl"/>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<a href="javascript:void(0)" class="btn btn-sm default button-previous"
style="display:none">
<i class="m-icon-swapleft"></i>上一步</a>
<a href="javascript:void(0)" id="button_next" class="btn btn-sm blue button-next">
下一步<i class="m-icon-swapright m-icon-white"></i>
</a>
<button type="button" id="save" class="btn btn-sm green button-submit"
style="display:none">
保存
</button>
<a href="" class="btn yellow btn-sm ajaxify" id="saveIndex_return">
               <i class="fa fa-reply">返回</i>
           </a>
</div>
</div>
</div>

</div>

2. js部分代码

$(function(){
$('#form').bootstrapWizard({
'nextSelector' : '.button-next',
'previousSelector' : '.button-previous',
onTabClick: function (tab, navigation, index, clickedIndex) {

               return false;//使a标签失去点击事件

               },            
onNext : function(tab,navigation,index){
assessHandleTitle(tab,navigation,index);
},
onPrevious: function (tab, navigation, index) {

            assessHandleTitle(tab, navigation, index);

        },
   onTabShow: function (tab, navigation, index) {

            var total = navigation.find('li').length;

            var current = index + 1;

            var percent = (current / total) * 100;

            $('.progress-bar').css({

                width: percent + '%'

            });

        }
});
function assessHandleTitle(tab,navigation,index){
var total = navigation.find('li').length;//得到li标签的长度
var current = index + 1;
$('li', $('#form')).removeClass("done");
var li_list = navigation.find('li');
for (var i = 0; i < index; i++) {

            $(li_list[i]).addClass("done");

        }
if(current == 1){
$('.button-previous').hide();//隐藏上一步按钮
}else{
$('.button-previous').show();//显示上一步按钮
}
if(current >= total){
$('.button-next').hide();//隐藏下一步按钮
$('.button-submit').show();//显示提交按钮
}else{
$('.button-next').show();//显示上一步按钮
$('.button-submit').hide();//隐藏保存按钮

}
}

});

这里是导航插件的主要代码实现部分，

第一个页面中只有“下一步”、“返回”按钮，

最后一个页面中有“上一步”、“保存”、“返回”按钮，

其他页面中有“上一步”、“下一步”、“返回”按钮

如有不对的地方，欢迎大家指正。谢谢