bootStrap向导功能wizard的使用

bootStrap向导功能wizard

1，引入必要的样式

<link rel="stylesheet" type="text/css" media="screen" href="/css/bootstrap.min.css" />
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.bootstrap.wizard.js"></script>
<script src="/js/jquery.min.js"></script>  //这个js最低版本1.3.2

可能的错误

Uncaught TypeError:$(...).boostrapWizard is not a function
         at HTMLDocument.<anonymous>()
		 at...
  //这个问题大概率就是jquery引入的版本不正确，试着换一些版本试试（亲测jquery过低会报这个错）

2，使用案例

<div id="rootwizard" class="tabbable tabs-left">
	<ul>
	  	<li><a href="#tab1" data-toggle="tab">First</a></li>
		<li><a href="#tab2" data-toggle="tab">Second</a></li>
		<li><a href="#tab3" data-toggle="tab">Third</a></li>

	</ul>
	<div class="tab-content">
	    <div class="tab-pane" id="tab1" style="height:300px">
	      1
	    </div>
	    <div class="tab-pane" id="tab2" style="height:300px">
	      2
	    </div>
		<div class="tab-pane" id="tab3" style="height:300px">
			3
	    </div>
		<ul class="pager wizard">
			<li class="previous first" style="display:none;"><a href="#">First</a></li>
			<li class="previous"><a href="#">Previous</a></li>
			<li class="next last" style="display:none;"><a href="#">Last</a></li>
		  	<li class="next"><a href="#">Next</a></li>
		</ul>
	</div>
</div>

<script>
$(document).ready(function() {
  	$('#rootwizard').bootstrapWizard({'tabClass': 'bwizard-steps',
                       onPrevious:function(tab,navigation,index){
							//上一页
                       },
                       onNext:function(tab,navigation,index){
                           //下一页
                       },
                       onPreviousFirst:function(tab,navigation,index){
							//第一页
                       },
                       onNextLast:function(tab,navigation,index){
                           //最后一页
                       }
	});
});
</script>