Using with option parametrs:$('#smartwizard').smartWizard();
Installing Smart Wizard:$('#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 } );
Step 4: also copy the below lines to your head section<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 5: Copy the below html to your file’s body section and open the file on browser. That’s all!<script type="text/javascript"> $().ready(function() { $('#smartwizard).smartWizard(); }); </script>
<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>