This is a component to create seld-managed wizards, using jQuery.
It is easy to use in your projects, as you just need to define each of your steps inside a div with a class, add the "next" and "previous" buttons, and call the wizard()
function:
<div id='mywizard'>
<div class='wizard-tab' stepname='step1'>
<h1>This is the first step</h1>
</div>
<div class='wizard-tab' stepname='step2'>
<h1>This is the second step</h1>
</div>
<div class='wizard-tab' stepname='step3'>
<h1>This is the last step</h1>
</div>
<div>
<button class='btn btn-primary btn-prev'>Prev</button>
<button class='btn btn-primary btn-next'>Next</button>
</div>
</div>
<script>
$(function() {
$('#mywizard').wizard();
})
</script>
You have several examples in this folder (some of them use bootstrap):
- simple.html that contains a div-based example (See it in action at codepen).
- modal.html that contains a simple wizard inside a bootstrap modal (See it in action at codepen).
- modalconditional.html contains an example with a multiple workflow for the wizard (See it in action at codepen).
- modalform.html that contains a full wizard example with tab validation and other features, inside a form that can be submitted to your server (See it in action at codepen).
You need to include jq-wizard.js
either from your cloned repo, or from a CDN, after jQuery. e.g.:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/dealfonso/jq-wizard@1.0/jq-wizard.js"></script>
jq-wizard is highly customizable. You just need to pass an object to the "wizard" function, that overrides the default values:
$('#mywizard').wizard({
onnext: function(stepname, steppos) { return true },
...
})
The meaning of the values and default values are the next:
- onnext: Function called before passing to the next step (will go to next in case that returns true).
- Default:
function(stepname, steppos) { return true }
- Default:
- onprev: Function called before passing to the prev step (will go to next in case that returns true).
- Default:
function(stepname, steppos) { return true }
- Default:
- onstep: Function called when showing a step (if arrived clicking on "next" button, will be called AFTER onnext or onprev)
- Default:
function(stepname, steppos) { return true }
- Default:
- onend: Function called before accepting the end click (will execute the default behaviour of the command in case that returns true).
- Default:
function(stepname, steppos) { return true }
- Default:
- onbegin: Function called whenever the script "begin" is called.
- Default:
function() { return true }
- Default:
- hidefnc: Method called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.
- Default:
function($obj) { $obj.hide() }
- Default:
- showfnc: Method called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); maybe you want to set a custom class, instead.
- Default:
function($obj) { $obj.show() }
- Default:
- stepobject: Selector to select the step indicators
- Default:
.step
- Default:
- stepactiveclass: Class used to mark those steps that have already been done
- Default:
active
- Default:
- tabselector: Selector for each tab.
- Default:
div.wizard-tab
- Default:
- stepnameattr: Attribute used to provide the name of the step
- Default:
stepname
- Default:
- autohidenext: If true, hides "next" button if disabled
- Default:
true
- Default:
- autohideprev: If true, hides "prev" button if disabled
- Default:
false
- Default:
- autohideend: If true, hides "end" button if disabled
- Default:
true
- Default:
- autofocus: If true, automatically sets the focus on the first input INSIDE the tab, when shown.
- Default:
true
- Default:
The wizard also triggers two events, and you can subscribe to them:
-
jq-wizard.begin: Called whenever the "begin" function is called (it is also triggered when the wizard is created).
- Handler:
begin(obj, stepname, steppos)
- Handler:
-
jq-wizard.update: Called whenever the interface is updated (i.e. when the step is shown). It is also triggered when the wizard is created.
- Handler:
update(obj, stepname, steppos)
- Handler:
In case that you want to receive the events during the creation, you must subscribe to the events before creating the wizard. E.g.:
$('#mywizard').on('jq-wizard.update', function(obj, stepname, steppos) {
console.log("interface just updated in step: ", stepname);
}).wizard();