Bootstrap向导：如何从JavaScript进入下一步？

Question

我有一个自举向导，其中一个步骤显示一个带有几个按钮的表单。 其中一个按钮需要调用ajax动作，如果成功，则转到向导中的下一步。

从绑定到按钮的onclick-Event的JavaScript，我如何告诉向导进入下一步？

Answer 1

如果您的意思是这个插件，那么您可以像这样调用向导函数：

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> 

http://jsbin.com/mufomov/1

Answer 2

幸运的是，现在你有了一个jQuery插件，用于创建由Vincent Gabriel创建的响应式表单向导UI。

我在这里创建了一个关于如何创建简单引导程序表单向导的完整教程：

http://codezag.com/bootstrap-form-wizard-with-validation/