基於jQuery，這六大表單嚮導插件首推！

jQuery表單嚮導是一個jQuery插件，與某種表格流協助表單創建（不用刷新頁面）。舉個例子，如果你有一個巨大的表格來輸入用戶數據，你可以使用表單嚮導來將其分成一系列相關步驟。這一優點使用戶不會被超長表單嚇到，並且當用戶輸入信息時為其提供一些進度指示。

在這篇文章中，我們列出了開發者最喜歡的六大jQuery表單嚮導，考量了它們的不同功能以及如何創立你自己的嚮導。這不會是一個冗長的列表，如果你正在尋找一個jQuery表單嚮導，這一定會為你指明正確的方向。

此列表在2017年8月30日更新，從列表中刪除了損壞和棄用的插件，並加入了新的插件來提供開發者要求的功能。

1. jQuery Steps

jQuery Steps是一個智能UI元素，使開發者可以很方便地創建嚮導界面。這個插件將內容分成區塊來形成更有結構和順序 的頁面外觀。它有多種功能，例如、狀態保持（這會保存你每一步的輸入）以及每個區塊的過渡效果。它可以通過NuGet或者bower安裝，擁有內容和功能豐富的API。

2. jQuery Smart Wizard

Smart Wizard是一個靈活且高度客戶化的jQuery步驟嚮導插件，有Bootstrap支持。它很容易執行，並且可以為你的表單、檢出屏幕、註冊步驟創建一個整潔而時髦的界面。它的功能包括主題支持（包括了多個主題）、URL導航、步驟選擇和動態隱藏或關閉步驟。它可以通過npm、bower和composer安裝，擁有內容和功能豐富的API。

3. formToWizard

這個小型插件可以用jQuery將任何網路表格轉換成多步驟的嚮導，每個表格<fieldset>可以轉換成具有前進和後退按鍵的單獨步驟。雖然它沒有像前兩個插件那麼多的功能，但它和jQuer確認插件整合，來提供確認功能。它是一個單獨的文件（所以你可以從GitHub上將其提取下來），如果JavaScript不可用，它會慢慢的退化。

4. jQuery Stepy

jQuery Stepy是一個生成可客戶化表格的嚮導。它假定表格有特定的結構，其中有特定的類。然後你只需要初始化插件，然後就擁有了表單嚮導。

此插件沒有任何預先設定的風格。但是，它提供了豐富的選擇，例如可以在步驟之間導航，提供前進、後退和完成按鈕與過渡效果，與任何你選用的確認插件整合。它提供了合理的API，例如允許你觸發步驟間的召回，或者當前步驟的確認後的召回。

5. Twitter Bootstrap Wizard

這個Twitter Bootstrap插件利用形式可轉換結構建造嚮導。它允許用戶利用按鈕來建造一個嚮導功能，來遍訪不同的嚮導步驟和實踐，並分別接入每一步。此插件關鍵的優勢在於它和Bootstrap緊密整合。它有一些基本功能，例如確認、進度條和創建或移除步驟的能力。另外，為了簡單地從GitHub中複製插件，它還可以通過Bower（雖然並不推薦）來安裝。它有不錯的內容且提供了基礎的API。

6. jQuery.wizard

最後要介紹的是jQuery.wizard。這是一個不同的表單嚮導，支持分支——在評論中被要求的功能之一。

基本結構包括步驟和分支，後者是選擇性的。一個簡單的線性表格可能只要求一個包含所有步驟的分支，但複雜的表格可能要求用到多個分支，甚至是極為複雜的分支。開發者需要處理表單中步驟和分支的數量。嚮導採用了不同的有限步驟決定怎樣自身導航。

這一插件的內容前所未有的豐富，提供了擴展API。它可以通過npm或者Bower來安裝，與Internet Explorer 6之後的所有版本兼容。它可以和多種其他插件整合，包括最受歡迎的jQuery Validation。你可以通過複製回復並在瀏覽器中查看examples/index.html來查看不同的例子。

彩蛋

開源軟體的世界很精彩，在為新項目選用插件時可以坐享極豐富的選擇。但是，這並不意味著我們應該躲避為有真正作用的軟體付費。以下是兩種需要付費的表單嚮導插件。我推薦你們去看一看它們，說不定會對你有用：

• Form Wizard – Multi Step Form Validation（下載鏈接：https://codecanyon.net/item/form-wizard-multi-step-form-validation/19613591）

• Timon – Step Form Wizard + jQuery Step Form Builder（下載鏈接：https://codecanyon.net/item/timon-step-form-wizard/15830006）

最後，如果你是那種喜歡弄懂所有事情的原理，不喜歡使用插件，那麼你可能會想要看一看以下這些教程，告訴你如何通過探索來創建一個表單嚮導。

• Turn any webform into a powerful wizard with jQuery（地址：http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/）

• Multistep Form With Progress Bar Using jQuery And CSS（地址：http://talkerscode.com/webtricks/multistep-form-with-progress-bar-using-jquery-and-css.php）

結論

你已經擁有6個jQuery表單嚮導插件的詳盡概覽，每一個插件都有不同的功能和特點。根據項目要求來選用它們，希望你可以從這篇文章中找到對你有所幫助的內容。如果有什麼遺漏請告知我們，或者通過下方評論告訴我們你最喜歡的插件是哪一個。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！