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

Smart Wizard - a javascript, jQuery wizard control plugin




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 it myself.

Current Version : 0.98


Screenshots:


















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

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>

28 comments:

Aravind.R September 20, 2009 at 9:17 PM  

Great! Article.keep updating

Unknown December 15, 2009 at 4:58 PM  

Hi great script but how to you validate on the last step (i.e. by clicking 'Done')?

Dipu R January 24, 2010 at 8:28 PM  

@setsta i will update with more sophisticated step wise validation soon in its next version. thank you

Anonymous May 1, 2010 at 5:16 PM  

Any news on updating the script to validate at each step (or in the end)?

Thanks!

Dipu R May 2, 2010 at 1:26 AM  

Im not yet started the work on next version.
But as a temporary fix i can give you some idea,

On the last step button

<input type="submit" value="Done" id="next" class="btn" onclick="return validateLastStep();">

<script type="text/javascript">
function validateLastStep(){
// Your validation code here
if(valid){
return true;
}else{
// code to display error message
return false;
}
}
</script>

Considering the last step button as a form submit button (type="submit") or you can put the form submit code on the true case of the js function (document.MyFormName.submit())

Hope this will help you for now

Thank you

Gabriel Acevedo May 5, 2010 at 4:22 PM  

Hey Guys,

Is it possible to integrate this with jQuery UI? Would be nice to have a consistent style without duplicating CSS code.

Thanks!

Dipu R May 10, 2010 at 8:58 PM  

Hi Gabriel Acevedo,

jQuery UI Theme support is not yet implemented on this plugin.
But i will consider your idea while developing the next version of the plugin.

Thank you

Unknown August 2, 2010 at 12:20 PM  

hi,

I am using the same library for my project. I am using this as different forms at each step. Is this possible to disable the upper navigation and enable the bottom next and bottom only.

Unknown August 2, 2010 at 12:31 PM  

hi again.

I changed elStepAnchor.attr("isDone","0"); from the function selectStep(idx) and it worked for me.

thanks

Siva September 16, 2010 at 4:07 AM  

Good Article...Release Next Version

Anonymous September 24, 2010 at 2:07 AM  

I downloaded and tested it and found a major flaw. Image you did the validation of the 3 fields on screen1, go to screen 4 and then go back by clcking the link at top of wizard to screen 1, invalidate the input and go back to screen 4, it allows that as this screen 4 was visted and then it does not validate screen1. I tried a custom validation function on the last page to validate all the tabs individually and if any of first failed then the first tab is shown. Now the problem is when I click next, it doesnot validate the screen 1 which is invalid.

Unknown December 7, 2010 at 11:45 AM  

Does not work with IE. Not with IE8 at least.

Anonymous December 27, 2010 at 5:14 PM  

Tried to return an ajax call within a wiz-content div. Does not work. I've tried .append(data), .html(data), and replaceWith(data)
Any ideas to get this to work

Dipu R December 29, 2010 at 12:52 AM  

in the function: selectTab(idx)
Line: 89

$(selTabId, obj).show();

You can replace the line with

$(selTabId, obj).html(data).show();
// data => you have to write ajax to fetch

Im developing next version "Smart Wizard 2",
It will have flexibility to include ajax contents, improved validation etc.
Hope i can release it within a month.

Thank you

Anonymous December 29, 2010 at 5:23 PM  

Thanks Dipu R,
Nice plugin, and thanks for the quick response on the ajax solution.

Milo January 19, 2011 at 7:32 AM  

Hi, I creating a shoppingcart and I like your work... But I have more 10000 items so, I like do with PHP and MYsql, this is possible... than I'd have to change?...

Greetings

Anonymous February 1, 2011 at 1:09 PM  

I got it working with .NET Framework 4.0. I changed the code to disable STEP clicks. I only allow clicks on buttons. I wrote another JS to do validations for each step. Also i cleaned up your CSS, don't need lot of that. Also last button is <asp:Button control which triggers final validation on server side. Don't rely on client side only!!! Also Jquery Table i use for input nicely goes inside this Wizard. There is one problem though. I can't get .NET SilverControl to be displayed inside Wizard in FireFox and Chrome. It shows in IE8.

Overall good job man!!!!!!

Anonymous February 22, 2011 at 3:42 AM  

nice article.....thank u....

Anonymous April 20, 2011 at 12:37 PM  

Is there a way to cause this wizard to appear in a JQuery Dialog popup?

rahul June 7, 2011 at 4:10 AM  

Please give me solutions for IE6 :(

Anonymous September 13, 2011 at 6:27 PM  

Hi, how can i set to current step when the page is set "Autopostback = true"

Thank you

Anonymous September 20, 2011 at 5:40 AM  

how to post wizard data to another page..

Anonymous November 3, 2011 at 2:54 PM  

I am really enjoying this wizard, except I have been unable to get a <table to display in the contents. I tried wrapping it in a div as well as explictly adding tables as the divs are:

elmStepContainer.append(allDivs); elmStepContainer.append(allTables);

Is it possible to add a table to each content?

Anonymous November 10, 2011 at 1:06 AM  

does it work just using tomcat server ?? how can test this code.please help to do a local set up.

Thanks in advance.

Anonymous June 25, 2012 at 11:18 AM  

How come you copied the name of someone else's control (smartwizard) along with the name of their website (techlaboratory)?

Anonymous September 4, 2012 at 1:42 PM  

Excelente Plugins facil de implementar y modificar, super potente

Samuel Berthelot February 18, 2013 at 4:56 AM  

i've found a problem with the wizard. When using transitionEffect: 'slide', html 5 controls are not longer recognized by the browser (chrome 10).
However when using transitionEffect: 'fade' or not transition effect at all, it works fine and the controls are displayed according to their type by the browser

Anonymous March 27, 2014 at 9:00 PM  

KetticWizard control for Windows Forms

Post a Comment