Twitter Bootstrap4 Wizard Plugin
This twitter bootstrap4 plugin builds a wizard out of a formatter tabbable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually.
Fork It »
Examples
Following are just a set of examples using this plugin.
- Basic Usage
- Basic Tabs Usage
- Basic withVisible False
- Basic Tabs Left Usage
- Wizard With Custom Next/Previous Buttons
- Wizard With Custom Next/Previous Buttons & First and Last buttons
- Wizard With Progress Bar using events
- Wizard With Form Validation
- Wizard With Disabled Tab Click
- Wizard With Finish Button On last tab
- Multiple Wizards
- Disabling/Enabling/Showing/Hiding/Removing Steps
- jQuery Validation Plugin With Step Validation
Documentation
| Key | Default | Description |
|---|---|---|
| tabClass | nav nav-pills | ul navigation class |
| nextSelector | .wizard .next | next element selector |
| previousSelector | .wizard .previous | previous element selector |
| firstSelector | .wizard .first | first element selector |
| lastSelector | .wizard .last | last element selector |
| onInit | null | Fired when plugin is initialized |
| onShow | null | Fired when plugin data is shown |
| onNext | null | Fired when next button is clicked (return false to disable moving to the next step) |
| onPrevious | null | Fired when previous button is clicked (return false to disable moving to the previous step) |
| onFirst | null | Fired when first button is clicked (return false to disable moving to the first step) |
| onLast | null | Fired when last button is clicked (return false to disable moving to the last step) |
| onTabClick | null | Fired when a tab is clicked (return false to disable moving to that tab and showing it's contents) |
| onTabShow | null | Fired when a tab content is shown (return false to disable showing that tab content) |
Demo
Basic Demo Example.
1
2
3
4
5
6
7