Author: | AdrianVillamayor |
---|---|
Views Total: | 740 views |
Official Page: | Go to website |
Last Update: | March 11, 2022 |
License: | MIT |
Preview:

Description:
A Vanilla JavaScript library that converts form groups into a user-friendly wizard UI with field validation integrated.
How to use it:
1. Create a step navbar that indicates the current step you are in a wizard process.
<section class="wizard"> <aside class="wizard-nav"> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Notification</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Style and content</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Destiny</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Last Step</span> </div> </aside> </section>
2. Add form groups as steps to the wizard.
<section class="wizard"> <aside class="wizard-nav"> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Notification</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Style and content</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Destiny</span> </div> <div class="wizard-step" data-type="form"> <span class="dot"></span> <span>Last Step</span> </div> </aside> <aside class="wizard-content container"> <div class="wizard-step"> <div class="form-group"> <label for="nameCampaign">Campaign name</label> <input type="text" name="name" class="form-control required" id="nameCampaign" placeholder="Enter a short campaign name"> </div> <div class="form-group"> <label for="descCampaign">Description of the campaign</label> <textarea name="description" class="form-control" id="descCampaign"></textarea> </div> </div> <div class="wizard-step"> <div class="form-group"> <label for="titleNoti">Title</label> <input type="text" name="title" class="form-control required banner-info" id="titleNoti" placeholder="Example: Message title"> </div> <div class="form-group"> <label for="bodyNoti">Body</label> <input type="text" name="body" class="form-control required banner-info" id="bodyNoti" placeholder="Example: Message body"> </div> <div class="form-group"> <label for="imageNoti">Image</label> <input type="file" name="image" class="form-control banner-info" id="imageNoti"> </div> </div> <div class="wizard-step"> <div class="form-group"> <label for="titleNoti">Action</label> <select class="form-control" name="action"> <option value="">Select one ...</option> <option value="0">Open bolus configurator</option> </select> </div> <div class="form-group"> <label for="bodyNoti">Segment</label> <select class="form-control required fetch-info" name="segment"> <option value="">Select one ...</option> <option value="0">País</option> <option value="1">Language</option> <option value="2">Diabetes Type</option> <option value="3">Center</option> </select> </div> </div> <div class="wizard-step"> <div class="form-group"> <label for="titleNoti">Action</label> <textarea class="form-control required fetch-info">🍍</textarea>> </div> </div> </aside> </section>
3. Load the main JavaScript and Stylesheet.
<link rel="stylesheet" href="./styles/css/main.css" /> <script src="./src/wizard.js"></script>
4. Initialize the Wizard and done.
const wizard = new Wizard(args); wizard.init();
5. All available wizard options.
const wizard = new Wizard({ // Default CSS classes wz_class: ".wizard", wz_ori: '.horizontal', wz_nav: ".wizard-nav", wz_nav_style: "dots", // or 'progress' wz_content: ".wizard-content", wz_buttons: ".wizard-buttons", wz_button: ".wizard-btn", wz_step: ".wizard-step", wz_form: ".wizard-form", wz_next: ".next", wz_prev: ".prev", wz_finish: ".finish", // Current step. 0 = Step 1 current_step: 0, // Number of steps steps: 0, // 'all', 'nav', or 'buttons' navigation: "all", // Show buttons buttons: true, // Custom lable text next: "Next", prev: "Prev", finish: "Submit", });
6. Reset & lock the wizard.
// reset wizard.reset(); // lock/unlock wizard.lock();
7. Events.
document.addEventListener("prevWizard", function (e) { alert("Prev Step"); }); document.addEventListener("nextWizard", function (e) { alert("Next Step"); }); document.addEventListener("submitWizard", function (e) { alert("Form Submit"); }); document.addEventListener("endWizard", function (e) { alert("Wizard is finished"); }); document.addEventListener("resetWizard", function (e) { alert("Wizard has restarted"); }); document.addEventListener("lockWizard", function (e) { alert("Wizard is locked"); }); document.addEventListener("unlockWizard", function (e) { alert("Wizard is unlocked"); });
Changelog:
v1.7.6 (03/11/2022)
- Add lock and reset mode
v1.7.1 (03/09/2022)
- All bugs have been fixed.
- Now the nav is generated automatically.
- Add new options.
v1.6 (02/03/2022)
- Fix column mode responsive
- Field fixes and column layout added