Smart Wizard – a javascript and jQuery plugin wizard control

Posted by: Dips on: August 14, 2009

In: Javascript | jQuery
Comment!

Overview:

Smart Wizard is a flexible jQuery(a JavaScript library) plugin that gives wizard like interface. Wizards are generally used to give step by step contents into users, it gives better and clean user interface and saves space. An example of wizard can see when we install a software in our windows machine. Some websites also uses this approach on their user registration or etc.

I was looking for a good wizard control for my web project and I don’t find a good control that suits my need. So I decided to develop my own.

Current Version : 0.98

Screenshots:

Screen 1

Screen 2

Demo:

1. Basic Wizard view demo

2. Vertical Style Wizard view demo

Home Page:

Visit Home

jQuery Plugin Page:

See this on jQuery Plugin page

Download:

Version – 0.98 download file from SourceForge

License:

Features:

Easy to implement, Minimal HTML required.
Easy Navigation – Step titles are act as anchors.
Validation for each step.
Option for specifying first selected step.
Option for making all steps enabled.
Both Vertical and Horizontal Navigation.

Getting Started:

Basic Usage:

$('#smartwizard').smartWizard();

Using with option parametrs:

$('#smartwizard').smartWizard(
 {
  selectedStep: 0,  // Selected Step, 0 = first step
  errorSteps:[],    // Array Steps with errors
  enableAll:false,  // Enable All Steps, true/false
  animation:true,   // Animation Effect on navigation, true/false
  validatorFunc:validateTabs // Step validation function, Step index will be passed
 }
);

Installing Smart Wizard:

Step 1: Get the latest version of jQuery(www.jquery.com)

Step 2: Download the Smart Wizard (http://tech-laboratory.blogspot.com)

Step 3: Include following lines to head section of your html file. Make sure that the path to the files are correct.

<link href="style_wizard.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="SmartWizard.js"></script>

Step 4: also copy the below lines to your head section

<script type="text/javascript">
    $().ready(function() {
        $('#smartwizard').smartWizard();
    });
  </script>

Step 5: Copy the below html to your file’s body section and open the file on browser. That’s all!

<div id="smartwizard" class="wiz-container">
		<ul id="wizard-anchor">
			<li><a href="#wizard-1"><h2>Step 1</h2>
          <small>Description for step 1</small></a></li>
			<li><a href="#wizard-2"><h2>Step 2</h2>
          <small>Description for step 2</small></a></li>
			<li><a href="#wizard-3"><h2>Step 3</h2>
          <small>Description for step 3</small></a></li>
		</ul>
		<div id="wizard-body" class="wiz-body">
  			<div id="wizard-1" >
  			   <div class="wiz-content">
                Content for Step 1
            </div>
            <div class="wiz-nav">
              <input class="next btn" id="next" type="button" value="Next >" />
            </div>
        </div>
  			<div id="wizard-2">
  			   <div class="wiz-content">
                Content for Step 2
            </div>
            <div class="wiz-nav">
              <input class="back btn" id="back" type="button" value="< Back" />
              <input class="next btn" id="next" type="button" value="Next >" />
            </div>
        </div>
  			<div id="wizard-3">
  			   <div class="wiz-content">
            Content for Step 3
            </div>
            <div class="wiz-nav">
              <input class="back btn" id="back" type="button" value="< Back" />
              <input class="btn" id="next" type="button" value="Done" />
            </div>
        </div>
        </div>
        </div>