🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Stepy is a jQuery Plugin that help you to create a customizable wizard for your website.

form-wizard Wizard

Documentation

jQuery Stepy - A Wizard Plugin

Build Status NPM Version Dependency Dev Dependency Code Climate Support

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.

Contributors

Check it out

Love it!

Via PayPal or Support. Thanks! (:


You May Also Like