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:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcrLLtE4F9oFhG9OV_EvMMdkx_Ixjk7t3IlgCnXoBEZXtPh1CrRZ4VoLfyFpeXim_Ll65xXZBqrjqGXZR8X_Wbrlopn7m10pfWCHsjAD8EaO_juG_ateDwMJpAv3VEHtNwDwyLMZauc-2/s320/SmartWizard.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX88eEETcofgvCdcR9fH_wTvavkIcpLv5Q4OtRPM2KY5bTqXRAAclNjIaqC3FW4p1jYnIl3Y-5R5GBojXg-Nreelz9GogWImpmdQvSL1Xo3T0uaSTHTkThyphenhyphenjlm4jZFoSJ8HUS-VeY_rCzJ/s320/SmartWizard2.jpg)
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:
Great! Article.keep updating
Hi great script but how to you validate on the last step (i.e. by clicking 'Done')?
@setsta i will update with more sophisticated step wise validation soon in its next version. thank you
Any news on updating the script to validate at each step (or in the end)?
Thanks!
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
Hey Guys,
Is it possible to integrate this with jQuery UI? Would be nice to have a consistent style without duplicating CSS code.
Thanks!
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
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.
hi again.
I changed elStepAnchor.attr("isDone","0"); from the function selectStep(idx) and it worked for me.
thanks
Good Article...Release Next Version
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.
Does not work with IE. Not with IE8 at least.
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
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
Thanks Dipu R,
Nice plugin, and thanks for the quick response on the ajax solution.
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
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!!!!!!
nice article.....thank u....
Is there a way to cause this wizard to appear in a JQuery Dialog popup?
Please give me solutions for IE6 :(
Hi, how can i set to current step when the page is set "Autopostback = true"
Thank you
how to post wizard data to another page..
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?
does it work just using tomcat server ?? how can test this code.please help to do a local set up.
Thanks in advance.
How come you copied the name of someone else's control (smartwizard) along with the name of their website (techlaboratory)?
Excelente Plugins facil de implementar y modificar, super potente
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
KetticWizard control for Windows Forms
Post a Comment