Step Form Wizard - Options

Here is all options of Step Form Wizard plugin.

Options

Option Description Values Default
duration Length of animation time between steps. Number 500
timingFunction Animation function. More easing functions are available with the use of plugins, most notably the jQuery UI suite. swing | linear 'swing'
linkNav Navigation as a link or simple text. true | false true
showNav Position of navigation. You can also hide navigation. 'top' | 'right' | 'bottom' | 'left' | true | false true
showNavNumbers If numbers in navigation aren't necessary, you can hide them. true | false true
showLegend Show headline legend on top of the content. true | false true
showButtons Show navigation buttons (Next, Prev, Finish) at bottom of the wizard. true | false true
nextBtn Template for next button. Class "next-btn" is necessary, other classes can be replaced. Javascript with HTML as default. 
$('<a class="next-btn sf-right sf-btn" href="#">NEXT</a>')
prevBtn Template for previous button. Class "prev-btn" is necessary, other classes can be replaced. Javascript with HTML as default. 
$('<a class="prev-btn sf-left sf-btn" href="#">PREV</a>')
prevBtn Template for finish button. Class "finish-btn" is necessary, other classes can be replaced. Javascript with HTML as default. 
$('<input class="finish-btn sf-right sf-btn" type="submit" value="finish"/>')
onNext Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(i) {}
onPrev Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(i) {}
onFinish Function for any issue of your choice (for example control of validation. Name of function or anonymous function. First parameter is a number of actual step, second parameter is jquery wrap for wizard. function(i) {}
onSlideChanged Function for any issue of your choice (for example control of validation. Name of function or anonym function. First parameter is a number of actual step, second is the number of coming step. function(to, from) {}
stepOffset This is offset in pixels between two steps. Number 10
height Height can be little tricky and you have 4 options to handle it. 'first' (height as first step) | 'auto' (flexible height) | 'tallest' (height as tallest step) | number (height in pixels) 'first'
theme Graphics design for wizard 'sea' | 'sky' | 'simple' | 'circle' 'sea'
markPrevSteps Visually different previous steps false | true false
startStep Starting step after wizard is loaded Number (counting from 0) 0

Trigger events

Name Description Example
sf-loaded Is triggered after wizard is initialized. 
$("#wizard_example_1").on('sf-loaded', function(e) {
    alert('Step form wizard was loaded');
})
sf-step-before Is triggered before transition to next/before
step and still can be interrupted.		 
$("#wizard_example_1").on('sf-step-before', function(e) {
    alert('Prepare for next step! Or not if you call preventDefault');
    e.preventDefault(); // this you have to call if you need to interrupt transition to next step
})
sf-step-after Is triggered after transition to next/before
step is done.		 
$("#wizard_example_1").on('sf-step-after', function(e) {
    alert('End of transition');
})
sf-finish Is triggered after transition to next/before
step was done.		 
$("#wizard_example_1").on('sf-finish', function(e) {
    alert('Sending form to process or not?');
    e.preventDefault(); // this you have to call if you need to interrupt submit form
})

Methods

Name Description Return Example
next For shifting step to next one. It will submit form if you call method on last step true | false 
var sfw = $("#wizard_example").stepFormWizard();
sfw.next();
prev For shifting step to previous one. true | false 
var sfw = $("#wizard_example").stepFormWizard();
sfw.prev();
finish For submitting form. true | false 
var sfw = $("#wizard_example").stepFormWizard();
sfw.finish();
refresh If you need redrawing of wizard after pictures or font were loaded. undefined 
var sfw = $("#wizard_example").stepFormWizard();
sfw.finish();