开门见山，直接讲使用。

实作效果：

 

向导

首先自然是引入jquery.smartWizard-2.0.js，

然后html元素这样写：

 
  
  1. <!-- 提交故障配置的form --> 
  2.     <form id="saveFiConfigs" action="addFiConfigs.action?fiBean.appProfile.id=${fiBean.appProfile.id}" method="post"> 
  3.         <!-- Tabs --> 
  4.         <div id="wizard" class="swMain"> 
  5.                 <ul> 
  6.                     <li> 
  7.                         <a href="#step-1"> 
  8.                             <label class="stepNumber">1</label> 
  9.                             <span class="stepDesc"> 
  10.                                 注入对象<br /> 
  11.                                 <small>选择故障注入对象</small> 
  12.                             </span> 
  13.                         </a> 
  14.                     </li> 
  15.                     <li> 
  16.                         <a href="#step-2"> 
  17.                             <label class="stepNumber">2</label> 
  18.                             <span class="stepDesc"> 
  19.                                 故障类型和故障参数<br /> 
  20.                                <small>选择故障类型和配置故障参数</small> 
  21.                             </span> 
  22.                         </a> 
  23.                     </li> 
  24.                     <li> 
  25.                         <a href="#step-3"> 
  26.                             <label class="stepNumber">3</label> 
  27.                             <span class="stepDesc"> 
  28.                                 确认提交<br /> 
  29.                                 <small>确认配置并提交保存</small> 
  30.                             </span> 
  31.                         </a> 
  32.                      </li> 
  33.                 </ul> 
  34.              
  35.             <div id="step-1"> 
  36.                 <h2 class="StepTitle">Step 1: 选择故障注入对象</h2> 
  37.                 // 这里写向导框中的内容，可以是table或者div等等 
  38.  ...
  39.             </div> 
  40.      
  41.             <div id="step-2"> 
  42.                 <h2 class="StepTitle">Step 2: 故障类型和故障参数</h2>     
  43.                 <br/>      
  44.                 ... 
  45.             </div>                       
  46.              
  47.             <div id="step-3"> 
  48.                 <h2 class="StepTitle">Step 3: 确认配置并提交保存</h2> 
  49.                 ...                
  50.             </div> 
  51.  
  52.         </div> 
  53.         <!-- End SmartWizard Content --> 
  54.     </form> 
 
  
一般向导都是一次性提交，所以，外面一般会用form包裹起来。
 
  
javascript代码：
 
  
 
 
  
 
  
  1. // Smart Wizard 
  2. jQuery(document).ready(function(){ 
  3.     jQuery('#wizard').smartWizard({transitionEffect:'slideleft',onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback,enableFinishButton:true}); 
  4.  
  5.     function leaveAStepCallback(obj){ 
  6.         var step_num= obj.attr('rel'); 
  7.         return validateSteps(step_num); 
  8.     } 
  9.  
  10.     function onFinishCallback(){ 
  11.        if(validateAllSteps()){ 
  12.             jQuery('form').submit(); 
  13.        } 
  14.     } 
  15. }); 
  16.  
  17. function validateAllSteps(){ 
  18.     var isStepValid = true; 
  19.      
  20.     if(validateStep1() == false){ 
  21.         isStepValid = false; 
  22.         jQuery('#wizard').smartWizard('setError',{stepnum:1,iserror:true});          
  23.     }else{ 
  24.         jQuery('#wizard').smartWizard('setError',{stepnum:1,iserror:false}); 
  25.     } 
  26.      
  27.     if(validateStep3() == false){ 
  28.         isStepValid = false; 
  29.         jQuery('#wizard').smartWizard('setError',{stepnum:3,iserror:true});          
  30.     }else{ 
  31.         jQuery('#wizard').smartWizard('setError',{stepnum:3,iserror:false}); 
  32.     } 
  33.      
  34.     if(!isStepValid){ 
  35.         jQuery('#wizard').smartWizard('showMessage','请修正有错误的步骤，然后继续'); 
  36.     } 
  37.      
  38.     return isStepValid; 
  39. }    
  40.  
  41. function validateSteps(step){ 
  42.     var isStepValid = true; 
  43.      
  44.     // validate step 1 
  45.     if(step == 1){ 
  46.         if(validateStep1() == false ){ 
  47.             isStepValid = false; 
  48.             jQuery('#wizard').smartWizard('showMessage','请选择故障注入对象（勾选上边的树），然后点击下一步.'); 
  49.             jQuery('#wizard').smartWizard('setError',{stepnum:step,iserror:true}); 
  50.         }else{ 
  51.             jQuery('#wizard').smartWizard('setError',{stepnum:step,iserror:false}); 
  52.         } 
  53.     } 
  54.  
  55.     // validate step3 
  56.     if(step == 3){ 
  57.         if(validateStep3() == false ){ 
  58.             isStepValid = false; 
  59.             jQuery('#wizard').smartWizard('showMessage','请将故障参数配置完整，然后点击下一步.'); 
  60.             jQuery('#wizard').smartWizard('setError',{stepnum:step,iserror:true}); 
  61.         }else{ 
  62.             jQuery('#wizard').smartWizard('setError',{stepnum:step,iserror:false}); 
  63.         } 
  64.     } 
  65.      
  66.     if (isStepValid == true) { 
  67.         jQuery('#wizard').smartWizard('hideMessage',''); 
  68.     } 
  69.  
  70.     return isStepValid; 
  71. } 
  72.  
  73. function validateStep1(){ 
  74.     var isValid = true;  
  75.     // 这里写自己的校验代码 
  76.     ...
  77.      
  78.     return isValid; 
  79. } 
  80.  
  81. function validateStep3(){ 
  82.     var isValid = true;     
  83.   // 这里写自己的校验代码 
  84.     ...
  85.  
  86.     return isValid; 
  87. } 
 
  
使用起来还是比较简单的。