[JS] jQuery Wizard

最近工作一直跟匯入的資料處理有關,弄到自己有點頭痛,其中比較頭痛的是 想要美觀的 Wizard 或是 Step 這種步驟式的plugin 大多都沒有達到我的需求

後來在網路上看到一段很簡略的 Step Wizard 應用上了一個案子,運行的很順暢。

不過還是不敷我使用,一直大量用到了之後決定寫成個 plugin 先寫個雛形方便未來修改擴增。

因為是用 Bootstrap 所以CSS範例也是跑 Bootstrap 

HTML 部分很簡單 最主要就是 id=wizard 要包住 wizard-sidebar 導航條,wizard-content 變成內容,一對一對應,內容不需要打標題,產生後會自動 的塞入

JS的部分

基本上可以不用設定,想自訂上一步下一步的字串就自己新增然後是 event

在執行過程中會有 第 N 步到第 N+1 步的動作,只需要寫在 event 裡面 也很直觀的用數字呈現 如果回傳 return false 整個 步驟就暫停,適合對應 Validation 類型的套件

然後有個 倒退的事件,這個不少 plugin 都沒有做,事件寫法是 n to n-1  這種寫法適合用在RESET 資料,當然只要 return false 一樣可以停止退回

另外還寫了一個 moveTo?after 就是移動到 這個步驟之後要執行的 Function ,比較適合用選擇後載入某些AJAX 資料或是欄位關閉開啟變動,以下可以看範例

JS 沒有正式命名或是打上資料,目前先放這樣 XD需要自行複製存為 JS 檔

 

我是米薩克,想了解更多可以點選  關於我