WizardJS is a ridiculously easy jQuery plugin to create wizards.
- Create the markup:
<div id="wizard">
<h1>My wizard</h1>
<div class="wizard-step">
<h2>Step 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, optio?</p>
</div>
<div class="wizard-step">
<h2>Step 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae, temporibus.</p>
</div>
<div class="wizard-step">
<h2>Step 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, nihil.</p>
</div>
<div class="wizard-step">
<h2>Step 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, inventore.</p>
</div>
<div class="wizard-step">
<h2>Step 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, necessitatibus?</p>
</div>
<div>
<a href="#" class="previous">Previous</a>
<a href="#" class="next">Next</a>
</div>
</div>
- Include jQuery and plugin's code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="dist/jquery.wizard-js.min.js"></script>
- Call the plugin:
$("#wizard").defaultPluginName({
next: ".next",
previous: ".previous",
steps: ".wizard-step",
activeClass: "active",
onNext: function () {},
onPrevious: function () {},
onChange: function () {}
});
MIT License © Fabio Soggia