bootStrap向导功能wizard用法

lhfmqc 发表于 2021-2-8 14:05

bootStrap向导功能wizard

1，引入必要的样式

```js
<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版本过低报错误

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

2，使用案例

```js
<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>

```

页: [1]

吾爱破解 - 52pojie.cn's Archiver

bootStrap向导功能wizard用法