This time I will share jQuery Plugin and tutorial about Easy Wizard Control In jQuery – jq-wizard.js, hope it will help you in programming stack.
| File Size: | 21.9KB |
|---|---|
| Views Total: | 422 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jq-wizard.js is a small jQuery plugin to create a practical and interactive wizard interface by breaking down long content blocks (like form groups and content sections) into individual steps.
How to use it:
1. To get started, download the plugin and put the jq-wizard.js script after loading the latest jQuery library.
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/jq-wizard.js"></script> |
2. Create steps together with Prev and Next navigation buttons for the wizard interface.
01 |
<div id="example"> |
02 |
<div class="wizard-tab" stepname="step1"> |
03 |
<h1>This is the first step</h1> |
04 |
</div> |
05 |
<div class="wizard-tab" stepname="step2"> |
06 |
<h1>This is the second step</h1> |
07 |
</div> |
08 |
<div class="wizard-tab" stepname="step3"> |
09 |
<h1>This is the last step</h1> |
10 |
</div> |
11 |
<div> |
12 |
<div class="step"></div> |
13 |
<div class="step"></div> |
14 |
<div class="step"></div> |
15 |
</div> |
16 |
<div> |
17 |
<button class="btn-prev">Prev</button> |
18 |
<button class="btn-next">Next</button> |
19 |
<button class="btn-end">Done</button> |
20 |
</div> |
21 |
</div> |
3. Call the plugin to enable the wizard interface.
1 |
$(function() { |
2 |
$('#example').wizard(); |
3 |
}) |
4. Config the wizard interface with the following options.
01 |
$('#example').wizard({ |
02 |
03 |
// Selector to select the step indicators |
04 |
stepobject: '.step', |
05 |
06 |
// Class used to mark those steps that have already been done |
07 |
stepactiveclass: 'active', |
08 |
09 |
// Selector for each tab |
10 |
tabselector: 'div.wizard-tab', |
11 |
12 |
// Attribute used to provide the name of the step |
13 |
stepnameattr: 'stepname', |
14 |
15 |
// Hides "next" button if disabled |
16 |
autohidenext: true, |
17 |
18 |
// Hides "prev" button if disabled |
19 |
autohideprev: false, |
20 |
21 |
// Hides "end" button if disabled |
22 |
autohideend: true, |
23 |
24 |
// Automatically sets the focus on the first input INSIDE the tab, when shown |
25 |
autofocus: true, |
26 |
27 |
// Called when an object has to be hidden (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); |
28 |
// maybe you want to set a custom class, instead; receives the jquery obj as parameter |
29 |
hidefnc: function($obj) { $obj.hide() }, |
30 |
31 |
// Called when an object has to be shown (e.g. the wizard-tab div or btn-prev button (if autohideprev is true)); |
32 |
// maybe you want to set a custom class, instead; receives the jquery obj as parameter |
33 |
showfnc: function($obj) { $obj.show() }, |
34 |
35 |
}); |
5. Event handlers.
01 |
$('#example').wizard({ |
02 |
03 |
// Called *before* passing to the next step (will go to next in case that returns true) |
04 |
onnext: function(stepname, steppos) { return true }, |
05 |
06 |
// Called *before* passing to the prev step (will go to next in case that returns true) |
07 |
onprev: function(stepname, steppos) { return true }, |
08 |
09 |
// Called when showing a step (if arrived clicking on "next" button, will be called *AFTER* onnext or onprev) |
10 |
onstep: function(stepname, steppos) { return true }, |
11 |
12 |
// Called *before* accepting the end click (will execute the default behaviour of the command in case that returns true) |
13 |
onend: function(stepname, steppos) { return true }, |
14 |
15 |
// Called whenever the script "begin" is called |
16 |
onbegin: function() { return true }, |
17 |
18 |
}); |
