Verity Wizard - examples

# 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();