bootStrap向导功能wizard用法

lhfmqc

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>  //jquery v1.3.2最低

jquery版本过低报错误

Uncaught TypeError:$(...).boostrapWizard is not a function
         at HTMLDocument.<anonymous>()
         at...

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){
                            //上一页
                           console.info(index)
                       },
                       onNext:function(tab,navigation,index){
                           //下一页
                           console.info(index)
                       }
    });
});
</script>