stepy's Introduction

jQuery Stepy - A Wizard Plugin

jQuery Stepy is a plugin that generates a customizable wizard.

Options

back:        undefined  // Callback before the backward action.
block:       false      // Block the next step if the current is invalid.
description: false      // Choose if the descriptions of the titles will be showed.
duration:    0          // Duration of the transition between steps in ms.
enter:       true       // Enables the enter key to change to the next step.
errorImage:  false      // If an error occurs, a image is showed in the title of the corresponding step.
finish:      undefined  // Callback before the finish action.
finishButto: true       // Include the button with class called '.finish' into the last step.
header:      true       // Creates a header with title and description.
ignore:      ''         // Choose the fields to be ignored on validation.
legend:      false      // Choose if the legends of the steps will be showed.
next:        undefined  // Callback before the forward action.
select:      undefined  // Callback executed when the step is shown.
titleClick:  true       // Active the back and next action in the titles.
titleTarget: undefined  // Choose the place where titles will be placed.
transition:  'hide'     // Use transition between steps ('hide', 'fade' or 'slide').
validate:    undefined  // Callback to each field of each step.

Usage

<form>
  <fieldset title="Step 1" class="stepy-step">
    <legend class="stepy-legend">description one</legend>

    <!-- inputs -->
  </fieldset>

  <fieldset title="Step 2" class="stepy-step">
    <legend class="stepy-legend">description two</legend>

    <!-- inputs -->
  </fieldset>

  <a class="stepy-back">back</a>
  <a class="stepy-next">next</a>
  <input type="submit" class="stepy-finish" />
</form>

$('form').stepy();

Functions

$('form').stepy('step', 2); // Changes the form to the second step.

$('form').stepy('destroy'); // Destroy the Stepy's bind and gives you the raw element.