用jQuery將註冊表格分成若干步驟

這個事情讓我感到非常緊張。我正在製作一個個人「爲了我自己的樂趣」項目，其中涉及很長的註冊表格。用jQuery將註冊表格分成若干步驟

我想要做的就是將表單分割爲分組與每個步驟相關的字段，以及在按下提交之前來回導航的能力，其中檢查標記或指示哪個步驟完成或不。我已經找到了一些例子，但是它們並不適合我的設計，也無法繞過我想要的方式進行修改。

我的目標是類似於論壇http://forum.xtreamer.net/中的幻燈片放映，底部的進度條和可點擊的步驟。我想做一些類似的事情，但對於表單中的步驟。

任何想法，我應該從哪裏開始？我試圖看看他們的代碼，看看他們是否使用公共或商業（但第三方）jquery插件，但沒有骰子。

任何人都可以推薦一個教程或一些資源？

謝謝！

2011-03-17 TuxMeister

可能受騙者：http://stackoverflow.com/questions/5186801/jquery-break-form-into-steps http://stackoverflow.com/questions/2074707/creating-多步驟表格 – gideon 2011-03-17 14:56:13

我剛剛設計了類似的東西，最近使用jCarousel。它是一個jQuery插件，可以讓你輕鬆滾動到頁面上的特定位置或ID。

我們所做的是創建一個長的橫向頁面，其中幾個div浮動到左側。每個div包含一個或兩個步驟，並在底部具有向前和向後按鈕。當你點擊某個特定步驟的下一個按鈕時，它會很快滑落，然後下一個按鈕將滑落，然後下一個按鈕將滑入

除此之外，頂部有絕對定位的按鈕，可以逐一帶您到每一步。

下面是個人導航的示例去來回：

<div class="nav"> 
    <a name="1" onclick="$(document).scrollTo('#1',3000);" style="float:left;">&larr; Back</a> 
    <a name="3" onclick="$(document).scrollTo('#3',3000);" style="float:right;">Next &rarr;</a> 
</div>

的#1和#3是一個先前的IDS，接下來的步驟 - 該代碼從步驟2正在採取3000是毫秒來滾動到表單的每個特定部分。 3秒有點長，但我們之間有一些動畫圖像之間的步驟，使形式更有趣！

希望這有助於:)

來源

2011-03-17 14:52:44

謝謝，請試試看。你有鏈接到你的版本，所以我可以看到它的行爲？如果你不能分享，我明白。再次感謝。 – TuxMeister 2011-03-17 17:51:53

是啊，如果你想在http://www.mymark.com註冊 - 有一個爲期7天的免費試用網站 – 2011-03-18 15:43:21

我認爲你想開發一個用戶完成個人詳細信息的表單，然後點擊轉到辦公室詳細信息，然後點擊轉到解決詳細信息，最後提交。

嘗試使用jQuery的顯示（）隱藏（）

將有三個div的。

當點擊你顯示一個div時，隱藏其他兩個div。

應該驗證每個divs並完成一個細節應該有一些隱藏的標誌來檢查細節是否完成。

在提交之前的最終細節你應該檢查每個div的標誌。

當您試圖給出選項以回到第一個div時，用戶可以清空第一個細節並進入最終。所以這個國旗檢查是必須的

應該工作！

來源

2011-03-17 14:52:34 zod

用jQuery將註冊表格分成若干步驟

回答

相關問題