我有一个Bootstrap向导,其中一个步骤显示了一个带有几个按钮的表单。其中一个按钮需要调用ajax操作,并在成功时进入向导的下一步。
从与按钮onclick事件相关联的JavaScript中,我如何告诉向导进入下一步?
从与按钮onclick事件相关联的JavaScript中,我如何告诉向导进入下一步?
wizard.bootstrapWizard('function_name', someValueIfNeeded);
因此,如果要显示下一步,您可以执行以下操作:
wizard.bootstrapWizard('next')
完整的方法列表可以在文档中找到。
var wizard = $('#rootwizard').bootstrapWizard();
$('button').click(function(){
wizard.bootstrapWizard('next')
});
#page {
width:600px;
margin:50px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<div id="page">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<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>
<li><a href="#tab4" data-toggle="tab">Forth</a></li>
<li><a href="#tab5" data-toggle="tab">Fifth</a></li>
<li><a href="#tab6" data-toggle="tab">Sixth</a></li>
<li><a href="#tab7" data-toggle="tab">Seventh</a></li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
1
</div>
<div class="tab-pane" id="tab2">
2
</div>
<div class="tab-pane" id="tab3">
3
</div>
<div class="tab-pane" id="tab4">
4
</div>
<div class="tab-pane" id="tab5">
5
</div>
<div class="tab-pane" id="tab6">
6
</div>
<div class="tab-pane" id="tab7">
7
</div>
</div>
</div>
<button>Next</button>
</div>