jquery的smartWizard插件使用方法

jquery 的smartWizard插件常用在一些向导式的，按步骤的功能中，是的用户按照我们设定的步骤进行操作，这样一方面有较好的用户体验，可以将庞大的表格 数据分解成多个步骤，是的每个步骤的数据量减少；另一方面流程比较清晰，先做那个下一步做什么都是可控可设定的。

下面说一下如何使用，首先html中引入jquery的smartWizard插件对应的jquery.smartWizard-2.0.js

html中代码如下：

[html]  view plain copy print ?

 

1. <!--html 中 -->  
2. <div id="sfxxdj_div" class="swMain">  
3.     <ul id="sfxxdj_wizard_ul">  
4.         <li><a href="#sfxxdj_step_1"> <label class="stepNumber">1</label>  
5.                 <span class="stepDesc">选择身份类型</span> </a>  
6.         </li>  
7.         <li><a href="#sfxxdj_step_2"> <label class="stepNumber">1</label>  
8.                 <span class="stepDesc">基本信息表</span> </a>  
9.         </li>  
10.         <li><a href="#sfxxdj_step_3"> <label class="stepNumber">2</label>  
11.                 <span class="stepDesc">学历情况表</span> </a>  
12.         </li>  
13.         <li><a href="#sfxxdj_step_4"> <label class="stepNumber">3</label>  
14.                 <span class="stepDesc">工作情况表</span> </a>  
15.         </li>  
16.   
17.     </ul>  
18.     <div id="sfxxdj_step_1"  style="overflow: auto;">  
19.         <table cellpadding="0" cellspacing="0" border="0" class="wi-frm-tbl" style="width:100%; height:500px;line-height:50px">  
20.             <th valign="top"><h1>请选择身份类型：</h1></br>  
21.             <h1><input type="radio" name="jjdj_lx" id="jjdj_ctgs" value="1">  
22.             公司</h1></br>  
23.             <h1><input type="radio" name="jjdj_lx" id="jjdj_glgs" value="3">  
24.             个人</h1></th>  
25.               
26.         </table>  
27.     </div>  
28.     <div id="sfxxdj_step_2"  style="overflow: auto;">  
29.         <!--内容可直接在这加入，如果内容过大可直接载入html -->  
30.     </div>  
31.     <div id="sfxxdj_step_3"  style="overflow: auto;">  
32.     </div>  
33.     <div id="sfxxdj_step_4"  style="overflow: auto;">  
34.     </div>  
35. </div>  
36. <!-- End SmartWizard Content -->  

js代码如下：

 

[javascript]  view plain copy print ?

 

1. var sfxxdj = {  
2.     //当点下一步时回调该函数，一般用于当前步骤的校验  
3.     nextStepCallback : function(stepObj){  
4.         var step_num= stepObj.attr('rel');  
5.         switch (step_num) {  
6.             case '1':  
7.                 if($('input[name=jjdj_lx]:checked').val()>0){  
8.                     sfxxdj.jjlx = $('input[name=jjdj_lx]:checked').val();  
9.                     if(sfxxdj.jjlx=='1'){  
10.                         $('#sfxxdj_wizard_ul [rel=5]').hide();  
11.                         $('#sfxxdj_step_5').hide();  
12.                     }else{  
13.                         $('#sfxxdj_wizard_ul [rel=2]').hide();  
14.                     }  
15.                     return true;//转下一步  
16.                 }  
17.                 else{  
18.                     alert("请选择基金登记类型！");  
19.                     return false;  
20.                 }  
21.             case '2':  
22.                 if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){  
23.                     alert("请输入基金名称！");  
24.                     return false;  
25.                 }else{  
26.                     sfxxdj.jjmc=$("#sfxxdj_jbqkb_jjmc").val();  
27.                 }  
28.                 return true;  
29.             case '3':  
30.                 return true;  
31.             case '4':  
32.                 return true;  
33.             case '5':  
34.                 return true;  
35.             case '6':  
36.             default:  
37.                 break;  
38.         }  
39.         return true;  
40.     },  
41.     //当现实该步骤时回调该函数，一般用于当前步骤的初始化  
42.     showStepCallback : function(stepObj){  
43.         var step_num= stepObj.attr('rel');  
44.         switch (step_num) {  
45.         case '2':  
46.             break;  
47.         case '3':  
48.             break;  
49.         case '4':  
50.             $("#jjxmmc").text(sfxxdj.jjmc);  
51.             if(sfxxdj.jjlx=="1"){  
52.                 $('#div .actionBar a.buttonFinish').removeClass("buttonDisabled");  
53.                 $('#div .actionBar a.buttonNext').addClass("buttonDisabled");  
54.             }  
55.             break;  
56.         case '5':  
57.             if(sfxxdj.b4=="0"){  
58.                 settWtjj();  
59.             }  
60.             break;  
61.         case '6':  
62.             break;  
63.         default:  
64.             break;  
65.         }  
66.     }  
67. }  
68.   
69. $(function(){  
70.     //对象初始化，以及设定相关回调时间  
71.     $('#sfxxdj_div').smartWizard({  
72.         keyNavigation: false,   
73.         onFinish    : sfxxdj.onSubmit,  
74.         onNextStep  : sfxxdj.nextStepCallback,  
75.         onShowStep  : sfxxdj.showStepCallback  
76.     });  
77.     $( ".actionBar a" ).button();  
78.     //文件形式初始化各步骤的内容  
79.     $('#sfxxdj_step_2').html("").load('jbqkb.html');  
80.     $('#sfxxdj_step_3').html("").load('xlqkb.html');  
81.     $('#sfxxdj_step_4').html("").load('gzqkb.html');  
82. }  

网上的参考资料不是很多，我也只是稍微应用了一下，最后说一下我了解的技巧，默认情况下上一步和下一步以及提交按钮需要人工来控制，哪些需要对按钮进行添加移除样式,如下：

 

 

[javascript]  view plain copy print ?

 

1. $('.actionBar a.buttonFinish').removeClass("buttonDisabled");//提交按钮可用  
2. $('.actionBar a.buttonFinish').addClass("buttonDisabled");//提交按钮变灰  
3. $('.actionBar a.buttonNext').removeClass("buttonDisabled");//下一步按钮可用  
4. $('.actionBar a.buttonNext').addClass("buttonDisabled");//下一步按钮变灰                 
5. $('.actionBar a.buttonPrevious').removeClass("buttonDisabled");//上一步按钮可用  
6. $('.actionBar a.buttonPrevious').addClass("buttonDisabled");//上一步按钮变灰  

 

如何手动激活一个步骤的，或者如何跳过步骤呢？操作如下：

比如直接激活第四步骤可点击：

 

[javascript]  view plain copy print ?

 

1. $('#sfxxdj_wizard_ul [rel=4]').attr("isDone",1);  
2. $('#sfxxdj_wizard_ul [rel=4]').addClass("done").removeClass("disabled");  

这样不管你进行的是否做到第四步，都可以点击查看第四步的内容。
比如某些时候我们需要从第一步调转到第三步：

 

 

[javascript]  view plain copy print ?

 

1. $('#sfxxdj_div').smartWizard('skipTo',3);  

原文出自：http://blog.csdn.net/lishuangzhe7047/article/details/43017461