Introduction

There is already some jQuery plugins to make wizards, but none to fit my needs and/or with a slide effect.
So I decide to build my own and share it.
easyWizard is pretty lightweight (5kb uncompressed), have some usefull options and is compatible with Chrome, Firefox, Opera and Safari.
I tried to make it simple to use and have some usefull options and hope it will be usefull to some people.

Getting Started

Download the code here (github repo)
Then, include jQuery and the jquery.easyWizard.js code you just download into your page like this :

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.easyWizard.js"></script>

HTML

This is a little exemple, you can make a wizard with far less elements but I need them to keep is nice with twitter bootstrap.
The minimum is a main container and some sub container to separate each steps, yeah that's all.

<form id="myWizard" type="get" action="" class="form-horizontal">
	<section class="step" data-step-title="The first">
		<div class="control-group">
			<label class="control-label" for="inputEmail">Email</label>
			<div class="controls">
				<input type="text" id="inputEmail" placeholder="Email" class="input-xlarge" title="Email is required !" required >
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="inputPassword">Password</label>
			<div class="controls">
				<input type="password" id="inputPassword" placeholder="Password" class="input-xlarge">
			</div>
		</div>
	</section>
	<section class="step" data-step-title="The second">
		<div class="control-group">
			<label class="control-label" for="inputUsername">Username</label>
				<div class="controls">
				<input type="text" id="inputUsername" placeholder="Username" class="input-xlarge">
			</div>
		</div>
	</section>
	<section class="step" data-step-title="The third">
		<div class="control-group">
			<label class="control-label" for="inputFirstname">Firstname</label>
				<div class="controls">
				<input type="text" id="inputFirstname" placeholder="Firstname" class="input-xlarge">
			</div>
		</div>
		<div class="control-group">
			<label class="control-label" for="inputCity">City</label>
				<div class="controls">
				<input type="text" id="inputCity" placeholder="City" class="input-xlarge">
			</div>
		</div>
	</section>
</form>

CSS

You only need css to personnalize the buttons and the "Navigation Bar" on top (if you enable those, offcourse). Anyway, here is a small exemple :

.easyWizardSteps {list-style:none;width:100%;overflow:hidden;margin:0;padding:0;border-bottom:1px solid #ccc;margin-bottom:20px}
.easyWizardSteps li {font-size:18px;display:inline-block;padding:10px;color:#B0B1B3;margin-right:20px;}
.easyWizardSteps li span {font-size:24px}
.easyWizardSteps li.current {color:#000}

.easyWizardButtons {overflow:hidden;padding:10px;}
.easyWizardButtons button, .easyWizardButtons .submit {cursor:pointer}
.easyWizardButtons .prev {float:left}
.easyWizardButtons .next, .easyWizardButtons .submit {float:right}

Javascript

$('#myWizard').easyWizard();

Demos

Basic exemple

Using the same code above
We just add some class to the buttons to make them nicer (thanks Twitter bootstrap)

Using callbacks

$('#myWizard2').easyWizard({
	buttonsClass: 'btn',
	submitButtonClass: 'btn btn-info',
	before: function(wizardObj, currentStepObj, nextStepObj) {
		alert('Hello, I\'am the before callback');
	},
	after: function(wizardObj, prevStepObj, currentStepObj) {
		alert('Hello, I\'am the after callback');
	},
	beforeSubmit: function(wizardObj) {
		alert('Hello, I\'am the beforeSubmit callback');
	}
});

Using own buttons

$('#myWizard3').easyWizard({
	showSteps: false,
	showButtons: false,
	submitButton: false
});
$('#myWizard3Pager .previous a').bind('click', function(e) {
	e.preventDefault();
	$('#myWizard3').easyWizard('prevStep');
});
$('#myWizard3Pager .page a').bind('click', function(e) {
	e.preventDefault();
	$('#myWizard3').easyWizard('goToStep', $(this).attr('rel'));
});
$('#myWizard3Pager .next a').bind('click', function(e) {
	e.preventDefault();
	$('#myWizard3').easyWizard('nextStep');
});

Options

Yeah cause it's easy, but there is some options to make it your own

function(wizardObj) {
	wizardObj.find('input, textarea').each(function() {
		if(!this.checkValidity()) {
			step = $(this).parents('.'+thisSettings.stepClassName).attr('data-step');
			easyWizardMethods.goToStep.call(wizardObj, step);

			return false;
		}
	});
}			

Extra

Cool, there is a little extra !
You can call the plugin directly to make your own controls (and buttons).

// Slide to a step
$('#myWizard').easyWizard('goToStep', 2);

// Slide to the previous step
$('#myWizard').easyWizard('prevStep');

// Slide to the next step
$('#myWizard').easyWizard('nextStep');