A powerful jQuery wizard plugin that supports accessibility and HTML5.
jQuery Steps is a lightweight wizard UI component written for jQuery.
Everything you need to start is:
- Include jQuery and jQuery Steps in your HTML code.
- Then select an element represents the wizard and call the
stepsmethod.
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta charset="utf-8">
<script src="jquery.js"></script>
<script src="jquery.steps.js"></script>
</head>
<body>
<script>
$("#wizard").steps();
</script>
<div id="wizard"></div>
</body>
</html>There are two ways to add steps and their corresponding content.
- Add HTML code into the representing wizard element.
<div id="wizard">
<h1>First Step</h1>
<div>First Content</div>
<h1>Second Step</h1>
<div>Second Content</div>
</div>- Or use the API to add steps dynamically.
// Initialize wizard
var wizard = $("#wizard").steps();
// Add step
wizard.steps("add", {
title: "HTML code",
content: "<strong>HTML code</strong>"
});Copyright (c) 2013 Rafael J. Staib Licensed under the MIT license.