A lightweight wizard UI component that supports accessibility and HTML5 in JavaScript Vanilla.
Add this code. cdn
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Wizard-JS@1.9.9/styles/css/main.css">
<script src="https://cdn.jsdelivr.net/gh/AdrianVillamayor/Wizard-JS@1.9.9/src/wizard.min.js"></script>
To display content without field control
<div class="wizard">
<aside class="wizard-content container">
<div class="wizard-step">
<!-- Step content -->
</div>
</aside>
</div>
For wizards with form purpose, it manages the required fields and validates them.
<form class="wizard" method="POST">
<aside class="wizard-content container">
<div class="wizard-step">
<input type="text" name="name" class="required" placeholder="Enter a short campaign name">
</div>
</aside>
</form>
To launch the wizard
let args = {
"wz_class": ".wizard",
"wz_nav_style": "dots",
"wz_button_style": ".btn .btn-sm .mx-3",
"wz_ori": "vertical",
"buttons": true,
"navigation": 'buttons',
"finish": "Save!"
};
const wizard = new Wizard(args);
wizard.init();
To restart the wizard
wizard.reset();
Allows to update the wizard, deleting or adding steps
wizard.update();
To lock the wizard in one step
wizard.lock();
To unlock the wizard
wizard.unlock();
[data-title]
=> Set the step title for the nav, if left blank the system will automatically add Step + step number
as the title.
<div class="wizard-step" data-title="Configuration">
If not defined, it is treated as default
.
Options allowing to modify the behavior and actions
Parameter | Type | Default | Definition / Value |
---|---|---|---|
wz_class |
String | .wizard | Wizard main container target |
wz_ori |
String | .horizontal | Wizard orientation |
wz_nav |
String | .wizard-nav | Nav container class |
wz_nav_style |
String | dots | Style of navigation steps / dots , tabs , progress |
wz_content |
String | .wizard-content | Body container class |
wz_buttons |
String | .wizard-buttons | Action button container class |
wz_button |
String | .wizard-btn | Class of Prev, Next and Finish action buttons |
wz_button_style |
String | .btn | Basic button style |
wz_step |
String | .wizard-step | Class for both nav and body steps |
wz_form |
String | .wizard-form | Class of the form that contains the wizard |
wz_next |
String | .next | Class of Next action button |
wz_prev |
String | .prev | Class of Prev action button |
wz_finish |
String | .finish | Class of Finish action button |
wz_highlight |
String | .highlight | Class for highlights |
current_step |
int | 0 | Active wizard step |
steps |
int | 0 | Number of wizard steps |
highlight_time |
int | 1000 | display time for highlight |
navigation |
String | all | Allows you to change the navigation mode / buttons , nav , all |
buttons |
Bool | true | Allows you to show or hide the action buttons |
nav |
Bool | true | Allows you to show or hide the header navigation |
highlight |
Bool | true | Allows you to show or hide the highlight |
next |
String | Next | Next button text |
prev |
String | Prev | Prev button text |
finish |
String | Submit | Finish button text |
highlight_type |
Object | { error: "error", warning: "warning", success: "success", info: "info" } | Allows to identify the different highlight effects and to define a class for them |
To identify when the wizard is fully generated and loaded.
This event is a CustomEvent and has as custom parameters inside details:
- target: wz_class
- elem: DOM element
document.addEventListener("wz.ready", function (e) {
console.log(`↓ Target ↓`)
console.log(e.detail.target) // .wizard
console.log(`↓ DOM Elem ↓`)
console.log(e.detail.elem) // DOM form#wizard.wizard.horizontal
});
Events that are part of the wizard
let wz_class = ".wizard";
let $wz_doc = document.querySelector(wz_class)
When the wizard is locked in a step
$wz_doc.addEventListener("wz.lock", function (e) {
alert("Wizard is locked");
});
When the wizard is unlocked in one step
$wz_doc.addEventListener("wz.unlock", function (e) {
alert("Wizard is unlocked");
});
Moving on to the prev step
$wz_doc.addEventListener("wz.btn.prev", function (e) {
alert("Prev Step");
});
Moving on to the next step
$wz_doc.addEventListener("wz.btn.next", function (e) {
alert("Next Step");
});
Moving steps forward with the navbar
$wz_doc.addEventListener("wz.nav.forward", function (e) {
alert("Forward Nav");
});
Moving steps backward with the navbar
$wz_doc.addEventListener("wz.nav.backward", function (e) {
alert("Backward Nav");
});
Error validating the data of the active form step (CustomEvent)
- id: Error ID
- msg: i18n message
- target: Contains all the elements that have given error
$wz_doc.addEventListener("wz.error", function (e) {
console.log(`↓ ID ↓`)
console.log(e.detail.id) // form_validaton
console.log(`↓ Message ↓`)
console.log(e.detail.msg) //options.i18n.form_validation
console.log(`↓ Target ↓`)
console.log(e.detail.target) // [input.form-control.required.highlight-error]
});
If it is a form, at the end it will fire the following event
$wz_doc.addEventListener("wz.form.submit", function (e) {
alert("Form Submit");
});
If it is not a form, at the end it will fire the following event
$wz_doc.addEventListener("wz.end", function (e) {
alert("Wizard is finished");
});
When it is restarted it generates the following event
$wz_doc.addEventListener("wz.reset", function (e) {
alert("Wizard has restarted");
});
To identify when the wizard is updated. (CustomEvent)
- target: wz_class
- elem: DOM element
$wz_doc.addEventListener("wz.update", function (e) {
console.log(`↓ Target ↓`)
console.log(e.detail.target) // .wizard
console.log(`↓ DOM Elem ↓`)
console.log(e.detail.elem) // DOM form#wizard.wizard.horizontal
});
Try it
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.