jQuery Stepy

Markup

You need a form with the right markup as following.
Each .stepy-step will became a step.
The title of the .stepy-step will be the headers titles.
And the .stepy-legend will be the header title description.
Inside the .stepy-step you put your stuffs.

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

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

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

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

  <fieldset title="Step 3" class="stepy-step">
    <legend class="stepy-legend">legend three</legend>

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

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

Default

Using the default options.

$('form').stepy();

Title Click

You can to use the header items to navigate between the steps with a click.
The header click is good when you have a lot of steps and want to jump a non sequential steps.

$('.form').stepy({ titleClick: true });

Description

Each step receives your description that is the .stepy-legend element of the .stepy-step.
That element is used on header to describe the step, but you can disabled it.
Disable the description does not hide the original .stepy-legend element. If you want to hide just the .stepy-legend element, use CSS for it.

$('form').stepy({ description: false });

Enter

By default, when you press the key enter, the next step will be called giving you a better usability.
If the option validate is enabled, then the step will be validated before.

$('form').stepy({ enter: true });

Finish Button

The selector of you finish button.

$('form').stepy({ finishButton: false });

Finish

Callback to be called when you press the finish button. Inside it you can prevent the submit returning false.
The element that will trigger can be a submit type element or any other button with the class stepy-finish.

$('form').stepy({
finish: function() {
  alert('Canceling...');
  return false;
}
});

Legend

Display the .stepy-legend element on fieldset.
When this option is false, it's just hidden. The content of the .stepy-legend element will be used to set the header description.

$('form').stepy({ legend: false });

This callback is trigged before you go to the next step.
Like the other callback, if you return false it won't go to the next step.
Here you can do your own validation, manually or using your favorite plugin.

$('form').stepy({
next: function(index, totalSteps) {
  alert('Going to step: ' + index + ' with total of steps: ' + totalSteps);
}
});

Back

This callback is trigged before you go to the back step.
Like the other callback, if you return false it won't go to the back step.

$('form').stepy({
back: function(index, totalSteps) {
  alert('Returning to step: ' + index + ' with total of steps: ' + totalSteps);
}
});

Select

This callback is trigged when the current step is rendered.
Here you can do actions to manipulate the current step with the elements shown to the user.

$('form').stepy({
select: function(index, totalSteps) {
  alert('Rendered step: ' + index + ' with total of steps: ' + totalSteps);
}
});

Title Target

You can change the place where the header will be rendered passing the selector of the element where the header will be appended.

$('form').stepy({ titleClick:  true });

Transition and Duration

You can set an effect during the transitions between the steps.
You can choose fade, slide or undefined for the normal transition.

$('form').stepy({
duration  : 400,
transition: 'fade'
});

If you don't want a header, you can just change header to false and it won't be created.

$('form').stepy({ header: false });

backButton

The class to find the back button inside each step.

$('form').stepy({ backButton: '.stepy-back' });

nextButton

The class to find the back button inside each step.

$('form').stepy({ nextButton: '.stepy-next' });

Global Buttons

If you wish, you can use global buttons to control the steps, just put it where you want.

$('form').stepy({ nextButton: '.stepy-next' });

validate

You can integrate any plugin of validation on your steps, just saying if each field is valid or not.

$('form').stepy({ nextButton: '.stepy-next' });

block

This options blocks the navigation to next step if the current is invalid.

$('form').stepy({ nextButton: '.stepy-next' });

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.

finishButton: true

Include the button with class called '.finish' into the last step.

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: false

Callback to each field of each step.

Changing the settings globally:

You can change any option mentioning the scope $.fn.stepy.defaults. + option_name. It must be called before you bind the plugin.

$.fn.stepy.defaults.validate = true;
$.fn.stepy.defaults.titleClick = true;

Functions:

$('form').stepy('step');

Goes to the given step.

$('form').stepy('destroy');

Destroy the Stepy's bind and gives you the raw element before it.

Ruby, Java and Python Developer in R7.com Portal.
Bachelor's in Information Systems and certified OCJA 1.0 and OCJP 6.
Helper and learner of the open source community, and designer adventurer.
Also has a passion for dance, skate, jiu-jitsu and Counter Strike Source. (: