This blog is outdated! Go to http://techlaboratory.net for latest updates

Smart Wizard 2.0 - flexible jQuery plug-in that gives wizard like interface




Overview

Smart Wizard is a flexible jQuery plug-in for wizard like interface. It allows to group contents into sections and so it saves page space and also gives a neat and stylish interface for users.
Using Smart Wizard 2.0 you can easily do input validation and so it is good for user registration and kind of tasks. Please see the demos and documentation for more details.

Versions

Latest Version : 2.0
Previous Version :0.98

Screenshots

SmartWizard 2.0 - screens

Smart Wizard 0.98 - Basic Layout
Smart Wizard 2.0 - Basic Layout
Smart Wizard 0.98 - Vertical Layout
Smart Wizard 2.0 - Vertical
Smart Wizard 0.98 - Vertical Layout
Smart Wizard 2.0 - Validation

SmartWizard 0.98 - screens

Smart Wizard 0.98 - Basic Layout
Smart Wizard 0.98 - Basic Layout
Smart Wizard 0.98 - Vertical Layout
Smart Wizard 0.98 - Vertical Layout


Demos

Smart Wizard 2.0 : Basic Example | Ajax Contents | Step Validation | Multiple Wizard | Vertical Style

Smart Wizard 0.98 : Basic Layout | Vertical Layout

Download

Smart Wizard 2.0 (SmartWizard-2.0.zip) : Download from SourceForge

Smart Wizard 0.98 (SmartWizard - 0.98.zip) : Download from SourceForge

Features (Smart Wizard 2.0)

  • Easy to implement, Minimal HTML required.
  • Ajax contents loading option.
  • Cool animation effects on step navigation. (none/fade/slide/slideleft)
  • Keyboard navigation option.
  • Horizontal and vertical style step anchors.
  • Easy step input validation option
  • Option to highlight error steps
  • In-built message box
  • Easy navigation with step anchors and navigation buttons
  • Can have multiple wizards on same page
  • Option to enable all steps on first load

License

Free to use and modify on both personal and commercial environment

Creative Commons License
Licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.

Getting Started

Basic Usage:
$('#wizard').smartWizard();
Using with option parameters:
$('#wizard').smartWizard(
 {
  // Properties
    selected: 0,  // Selected Step, 0 = first step   
    keyNavigation: true, // Enable/Disable key navigation(left and right keys are used if enabled)
    enableAllSteps: false,  // Enable/Disable all steps on first load
    transitionEffect: 'fade', // Effect on navigation, none/fade/slide/slideleft
    contentURL:null, // specifying content url enables ajax content loading
    contentCache:true, // cache step contents, if false content is fetched always from ajax url
    cycleSteps: false, // cycle step navigation
    enableFinishButton: false, // makes finish button enabled always
    errorSteps:[],    // array of step numbers to highlighting as error steps
    labelNext:'Next', // label for Next button
    labelPrevious:'Previous', // label for Previous button
    labelFinish:'Finish',  // label for Finish button        
  // Events
    onLeaveStep: null, // triggers when leaving a step
    onShowStep: null,  // triggers when showing a step
    onFinish: null  // triggers when Finish button is clicked
 }
); 
Parameters and Events are describing on the table below

Installing Smart Wizard 2.0

Step 1: Include Files

Include the following JavaScript and css files on your page.

  1. jQuery Library file (Don't include if you already have it on your page)
  2. CSS(Style Sheet) file for Smart Wizard
  3. JavaScript plug-in file for Smart Wizard

To include the files copy and paste the below lines inside the head tag (<head> </head>) of your page.
Make sure the paths to the files are correct with your working environment.
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link href="smart_wizard.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery.smartWizard-2.0.min.js"></script>

Step 2: The JavaScript

Inititialize the Smart Wizard, copy and paste the below lines inside the head tag (<head> </head>) of your page
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard
    $('#wizard').smartWizard();
  }); 
</script>

Step 3: The HTML

Finally the html, below shows the HTML markup for the Smart Wizard, You can customize it by including your on contents for each steps.
Copy and paste the below html inside the body tag (<body></body>) of your page.
<div id="wizard" class="swMain">
  <ul>
   <li><a href="#step-1">
          <label class="stepNumber">1</label>
          <span class="stepDesc">
             Step 1<br />
             <small>Step 1 description</small>
          </span>
      </a></li>
   <li><a href="#step-2">
          <label class="stepNumber">2</label>
          <span class="stepDesc">
             Step 2<br />
             <small>Step 2 description</small>
          </span>
      </a></li>
   <li><a href="#step-3">
          <label class="stepNumber">3</label>
          <span class="stepDesc">
             Step 3<br />
             <small>Step 3 description</small>
          </span>                   
       </a></li>
   <li><a href="#step-4">
          <label class="stepNumber">4</label>
          <span class="stepDesc">
             Step 4<br />
             <small>Step 4 description</small>
          </span>                   
      </a></li>
  </ul>
  <div id="step-1"> 
      <h2 class="StepTitle">Step 1 Content</h2>
       <!-- step content -->
  </div>
  <div id="step-2">
      <h2 class="StepTitle">Step 2 Content</h2> 
       <!-- step content -->
  </div>                      
  <div id="step-3">
      <h2 class="StepTitle">Step 3 Title</h2> 
       <!-- step content -->
  </div>
  <div id="step-4">
      <h2 class="StepTitle">Step 4 Title</h2> 
       <!-- step content -->                   
  </div>
</div>

More details & descriptions:

Load ajax content

To load the content via ajax call you need to specify the property "contentURL".
example:
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard with ajax content load
    $('#wizard').smartWizard({contentURL:'services/ajaxcontents.php'});
  }); 
</script>
When a step got focus the SmartWizard will post the step number to this contentURL and so you can write server side logic to format the content with the step number to be shown next. The response to this call should be the content of that step in HTML format.

To get the step number in php:
$step_number = $_REQUEST["step_number"]; 
By default the SmartWizard will fetch the step content only on the first focus of the step, and cache the content and use it on the further focus of that step. But you can turn off the content cache by specifying the property "contentCache" to false.
example:
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard with ajax content load and cache disabled
    $('#wizard').smartWizard({contentURL:'services/ajaxcontents.php',contentCache:false});
  }); 
</script>
Please see the ajax contents demo and following files on the source code to know how ajax content loading is implemented.
smartwizard2-ajax.htm
services/service.php

Input validation

Smart Wizard 2.0 does not have in-built form validation, but you can call you own validation function for each steps or for all steps with the events. Smart Wizard 2.0 has three events (onLeaveStep,onShowStep,onFinish). So you can write your step validation login in "onLeaveStep" event and on validation fail you can stay on that step by cancelling that event. Validation logic for all steps can be write on "onFinish" event and so you can avoid submitting the form with errors.
example:
<script type="text/javascript">
  $(document).ready(function(){
     // Smart Wizard      
    $('#wizard').smartWizard({onLeaveStep:leaveAStepCallback,
                                  onFinish:onFinishCallback});

      function leaveAStepCallback(obj){
        var step_num= obj.attr('rel'); // get the current step number
        return validateSteps(step_num); // return false to stay on step and true to continue navigation 
      }
      
      function onFinishCallback(){
       if(validateAllSteps()){
        $('form').submit();
       }
      }
      
      // Your Step validation logic
      function validateSteps(stepnumber){
        var isStepValid = true;
        // validate step 1
        if(stepnumber == 1){
          // Your step validation logic
          // set isStepValid = false if has errors
        }
        // ...      
      }
      function validateAllSteps(){
        var isStepValid = true;
        // all step validation logic     
        return isStepValid;
      }       
     
  });
</script>
Please see the step validation demo and following file on the source code to know how step input validation is implemented.
smartwizard2-validation.php

Highlight error steps

Highlighting error steps in Smart Wizard is easy
    $('#wizard').smartWizard('setError',{stepnum:3,iserror:true});
It takes two arguments
1. stepnum :- Step number to which is highlighted as error
2. iserror :- true = set the step as error step and false = remove the error highlighting

example:
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard
      $('#wizard').smartWizard();
        
      function setError(stepnumber){
        $('#wizard').smartWizard('setError',{stepnum:stepnumber,iserror:true});
      }
  }); 
</script>

Show message inside the wizard

An in-built message box is available with Smart Wizard 2.0 and you can call it as like below
    $('#wizard').smartWizard('showMessage','Hello! World');

example:
<script type="text/javascript">
  $(document).ready(function() {
      // Initialize Smart Wizard
      $('#wizard').smartWizard();
        
      function showWizardMessage(){
          var myMessage = 'Hello this is my message';
          // You can call this line wherever to show message inside the wizard
          $('#wizard').smartWizard('showMessage',myMessage);
      }
  }); 
</script>

Parameter Description:

Parameter Name Description Values Default Value
selected specify the selected step integer 0
keyNavigation enable/disable key navigation.
left/right keys are used if enabled
true = enabled
false= disabled
true
enableAllSteps Enable/Disable all steps on first load true = enabled
false= disabled
false
transitionEffect Animation effect on step navigation none/fade/slide/slideleft fade
contentURL Setting this property will enable ajax content loading, setting null will disable ajax contents null or a valid url null
contentCache This property will enable caching of the content on ajax content mode. So the contents are fetched from the url only on first load of the step true = enabled
false= disabled
true
cycleSteps This property allows to cycle the navigation of steps true = enabled
false= disabled
false
enableFinishButton This property will make the finish button enabled always true = enabled
false= disabled
false
errorSteps an array of step numbers to highlighting as error steps array of integers
ex: [2,4]
[]
labelNext Label for Next button String Next
labelPrevious Label for Previous button String Previous
labelFinish Label for Finish button String Finish


 

Event Description:

Event Name Description Parameters Default
onLeaveStep Triggers when leaving a step.

This is a decision making event, based on its function return value (true/false) the current step navigation can be cancelled.
Object: object of the step anchor element.

you can access the step number and step body element using this object
null
onShowStep Triggers when showing a step.

This is a decision making event, based on its function return value (true/false) the current step navigation can be cancelled.
Object: object of the step anchor element.

you can access the step number and step body element using this object
null
onFinish Triggers when the Finish button is clicked.
This is a decision making event, based on its function return value (true/false) the further actions can be cancelled.

ex: If the validation fails we can cancel form submitting and can show an error message, please see the form validation example for the implementation

If not set clicking finish button will submit the form in which the wizard is placed, and do nothing if a parent form is not found.
Object Array: an array of the object of all the step anchor elements null

 
 

14 comments:

Melandro October 20, 2011 at 9:48 PM  

How can I modify the heigth property for step containers? If a have more components than the container can hold, components aren't displayed ...

Domain name India November 2, 2011 at 2:57 AM  

What a wonderful article? You have described very well. How you got this idea? Great work.

Anonymous November 27, 2011 at 11:41 AM  

Hi

Have you tried placing the wizard inside a jqueyUI-dialog? All input fields seems to be locked/not working... :-/

Anonymous November 27, 2011 at 11:54 AM  

Hmmm....it is something witht the z-index : 88

Anonymous February 25, 2012 at 8:48 AM  

Is there any way to branch or initialize the the wizard manually, instead of refreshing every time???

Sri February 28, 2012 at 7:54 PM  

Hi! Does anyone know how do I skip a step? Let's say after Step 1, I wanna check if user is already logged in. If yes, skip Step 2 and go to Step 3. I've been trying all day but to no avail. Help me pls anyone! Thanks much!

Vijay March 14, 2012 at 11:49 PM  

I want to pass xml from one page to another and please help me on how to refer the passed xml in the second page.

Me June 7, 2012 at 10:49 AM  

Sri, the source code might need modification. Otherwise, I finally used the roundabout approach of putting in the startStep function, $(".buttonNext").trigger('click');. From there of course the intermediary screens still flash by for a second, put I was able to hide them programmatically.

Anonymous October 31, 2012 at 2:30 PM  

How can I modify the heigth property for step containers? If a have more components than the container can hold, components aren't displayed ...

Anonymous November 27, 2012 at 9:57 PM  

for some reason the first tab was not showing on startup. I fixed this by not hiding the object for tab 0 in function prepareSteps()
$(steps, obj).each(function(i) {
if (i != 0) {
$($(this).attr("href"), obj).hide();
$(this).attr("rel", i + 1);
}
});

Anonymous January 6, 2013 at 11:04 PM  

To change the step container height you have to change the following css tag in the style sheet

.swMain .stepContainer div.content {}

change the height....

Unknown January 8, 2013 at 10:28 AM  

Truly a great plugin.
A small issue I am facing here. How to skip a step in this wizard. When I disable a step, I expect it to be non navigable but still I am able to move to the step. Please suggest!
I tried using the gotoStep function with setTimeout but it messes up everything.

Unknown February 27, 2013 at 7:17 AM  

Hi , i have a question for the Smart Wizard JQuery Plugin

When i finish the process in Step 3 , i would like to re init the wizard at the STep 0 and clear all fields of the wizard . But i cannot find a way to initialize the wizard on the OnFinish Event . Any idea ?? Best regards

Anonymous April 22, 2013 at 5:04 AM  

My Dropdown menu is open behind the wizard, give me any solution

Post a Comment