wizard-steps.js
v3.2.1
Published
JS library to provide a wizard, like the one below:
Downloads
239
Maintainers
Readme
Wizard Steps
JS library to provide a wizard, like the one below:
Usage
Import the following files:
- dist/wizard-steps.min.css (This one is just the styles needed for the plugin works correctly)
- dist/wizard-steps.min.js
If you want the default style of the plugin, you will need this HTML structure:
<div id="my-wizard" class="wizard-steps">
<div class="wizard-steps-header">
<ul>
<li class="wizard-step-header-tab active">
<span>Tab 1</span>
</li>
<li class="wizard-step-header-tab">
<span>Tab 2</span>
</li>
...
...
...
</ul>
</div>
<div class="wizard-steps-body">
<div class="wizard-step active">
<h4>Step 1 content</h4>
</div>
<div class="wizard-step">
<h4>Step 2 content</h4>
</div>
...
...
...
</div>
<div class="wizard-steps-footer">
<button class="btn-back">Back</button>
<button class="btn-next">Confirm</button>
</div>
</div>
If you don't, this is the required HTML:
<div id="my-wizard" class="wizard-steps">
<div class="wizard-step active">
<h4>Step 1</h4>
</div>
<div class="wizard-step">
<h4>Step 2</h4>
</div>
...
...
...
<button class="btn-back">Back</button>
<button class="btn-next">Confirm</button>
</div
Then do that in your javascript:
var wizard = new WizardSteps(); // Will search for .wizard-steps by default
// or
var wizard = new WizardSteps({
element: '#my-wizard'
})
Notes
About the HTML code, the elements with these classes are optionals:
- wizard-steps-header
- wizard-steps-body
- wizard-steps-footer
Despite the element with the wizard-steps-footer class is optional, you still need the elements with the classes btn-back and btn-next for walk through the wizard.
Like the wizard-steps-footer case, the wizard-steps-body is optional to, but you still need the elements with the wizard-step class for the steps, otherwise will not work.
Options
The available options, with the default values, are shown below:
new WizardSteps({
element: '.wizard-steps', // The CSS selector for the wizard element
events: { // Explained in the next section
onBeforeProceed: function(currentStepIndex) {
return true;
},
onAfterProceed: function(currentStepIndex) {
},
onBeforeBack: function(currentStepIndex) {
return true;
},
onAfterBack: function(currentStepIndex) {
},
},
buttons: {
classShow: '',
classHide: 'insivible-step-button',
back: {
hideOnFirstStep: true
},
next: {
hideOnLastStep: true
}
}
})
After instantiate you can change only the events:
var wizard = new WizardSteps();
wizard.element = '#my-wizard'; // Will not work
wizard.onBeforeProceed = myFunction1(currentStepIndex);
wizard.onAfterProceed = myFunction2(currentStepIndex);
wizard.onBeforeBack = myFunction3(currentStepIndex);
wizard.onAfterBack = myFunction4(currentStepIndex);
Methods
| Method | Description | | ------ | ------ | | show() | Show the wizard element | | hide() | Hide the wizard element | | destroy() | Destroy the wizard element |
Events
Important: All the events callbacks can be asynchronous.
| Event | Description | | ----- | ----- | | onBeforeProceed | Called before going to the next step. Must return true to continue or false to not. | | onBeforeProceedToStep | Called before going to the specified step index. Must return true to continue or false to not. | | onAfterProceed | Called after going to the next step. | | onAfterProceedToStep | Called after going to the sepecified step. | | onBeforeBack | Called before back to the previous step. Must return true to continue or false to not. | | onBeforeBackToStep | Called before back to the specified step. Must return true to continue or false to not. | | onAfterBack | Called after back to the previous step. | | onAfterBackToStep | Called after back to the specified step. | | onBeforeGoToStep | Called before going to the specified step. Unlike the onBeforeProceed this will called no matter if it's going backwards or forwards. Must return true to continue or false to not. | | onAfterGoToStep | Called after going to the specified step. Unlike the onAfterProceed this will called no matter if it's going backwards or forwards. | | onBeforeLeaveStep| Called before leaving the specified step. . Must return true to continue or false to not. |
onBeforeProceed(callback(oldIndex, newIndex) : boolean)
onBeforeProceed(function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
onBeforeProceedToStep(stepIndex, callback(oldIndex, newIndex) : boolean)
onBeforeProceedToStep(2, function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
onAfterProceed(callback(oldIndex, newIndex) : void)
onAfterProceed(function(oldIndex, newIndex) {
console.log('You came from: ', oldIndex);
console.log('You are in: ', newIndex);
})
onAfterProceedToStep(stepIndex, callback(oldIndex, newIndex) : void)
onAfterProceedToStep(3, function(oldIndex, newIndex) {
console.log('You came from: ', oldIndex);
console.log('You are in: ', newIndex);
})
onBeforeBack(callback(oldIndex, newIndex) : boolean)
onBeforeBack(function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
onBeforeBackToStep(stepIndex, callback(oldIndex, newIndex) : boolean)
onBeforeBackToStep(0, function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
onAfterBack(callback(oldIndex, newIndex) : void)
onAfterBack(function(oldIndex, newIndex) {
console.log('You came from: ', oldIndex);
console.log('You are in: ', newIndex);
})
onAfterBackToStep(stepIndex, callback(oldIndex, newIndex) : void)
onAfterBackToStep(1, function(oldIndex, newIndex) {
console.log('You came from: ', oldIndex);
console.log('You are in: ', newIndex);
})
onBeforeGoToStep(stepIndex, callback(oldIndex, newIndex) : boolean)
onBeforeGoToStep(1, function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
onAfterGoToStep(stepIndex, callback(oldIndex, newIndex) : void)
onAfterGoToStep(1, function(oldIndex, newIndex) {
console.log('You came from: ', oldIndex);
console.log('You are in: ', newIndex);
})
onBeforeLeaveStep(stepIndex, callback(oldIndex, newIndex) : boolean)
onBeforeLeaveStep(1, function(oldIndex, newIndex) {
console.log('You are in: ', oldIndex);
console.log('You are going to: ', newIndex);
return true;
})
TO DO
- Add support for async functions on the onBeforeGoToStep and onBeforeLeaveStep events.