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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('.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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

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

Finish Button

The selector of you finish button.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

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

Next

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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

About you

Your professional informations

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

backButton

The class to find the back button inside each step.

Access

back next
About you

back next
Your professional informations

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

nextButton

The class to find the back button inside each step.

Access

back next
About you

back next
Your professional informations

back next
$('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.

Access

About you

Your professional informations

back next
$('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.

Access

About you

Your professional informations

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

block

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

Access

About you

Your professional informations

back next
$('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.

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. (: