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/