jquery的smartWizard插件使用方法

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

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

html中代码如下：

[html] view plain copy print ?

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

js代码如下：

[javascript] view plain copy print ?

1. varsfxxdj={
2. //当点下一步时回调该函数，一般用于当前步骤的校验
3. nextStepCallback:function(stepObj){
4. varstep_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. returntrue;//转下一步
16. }
17. else{
18. alert("请选择基金登记类型！");
19. returnfalse;
20. }
21. case'2':
22. if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){
23. alert("请输入基金名称！");
24. returnfalse;
25. }else{
26. sfxxdj.jjmc=$("#sfxxdj_jbqkb_jjmc").val();
27. }
28. returntrue;
29. case'3':
30. returntrue;
31. case'4':
32. returntrue;
33. case'5':
34. returntrue;
35. case'6':
36. default:
37. break;
38. }
39. returntrue;
40. },
41. //当现实该步骤时回调该函数，一般用于当前步骤的初始化
42. showStepCallback:function(stepObj){
43. varstep_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.actionBara.buttonFinish').removeClass("buttonDisabled");
53. $('#div.actionBara.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. }
69. $(function(){
70. //对象初始化，以及设定相关回调时间
71. $('#sfxxdj_div').smartWizard({
72. keyNavigation:false,
73. onFinish:sfxxdj.onSubmit,
74. onNextStep:sfxxdj.nextStepCallback,
75. onShowStep:sfxxdj.showStepCallback
76. });
77. $(".actionBara").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. $('.actionBara.buttonFinish').removeClass("buttonDisabled");//提交按钮可用
2. $('.actionBara.buttonFinish').addClass("buttonDisabled");//提交按钮变灰
3. $('.actionBara.buttonNext').removeClass("buttonDisabled");//下一步按钮可用
4. $('.actionBara.buttonNext').addClass("buttonDisabled");//下一步按钮变灰
5. $('.actionBara.buttonPrevious').removeClass("buttonDisabled");//上一步按钮可用
6. $('.actionBara.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);

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

html中代码如下：

[html] view plain copy print ?

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

js代码如下：

[javascript] view plain copy print ?

1. varsfxxdj={
2. //当点下一步时回调该函数，一般用于当前步骤的校验
3. nextStepCallback:function(stepObj){
4. varstep_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. returntrue;//转下一步
16. }
17. else{
18. alert("请选择基金登记类型！");
19. returnfalse;
20. }
21. case'2':
22. if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){
23. alert("请输入基金名称！");
24. returnfalse;
25. }else{
26. sfxxdj.jjmc=$("#sfxxdj_jbqkb_jjmc").val();
27. }
28. returntrue;
29. case'3':
30. returntrue;
31. case'4':
32. returntrue;
33. case'5':
34. returntrue;
35. case'6':
36. default:
37. break;
38. }
39. returntrue;
40. },
41. //当现实该步骤时回调该函数，一般用于当前步骤的初始化
42. showStepCallback:function(stepObj){
43. varstep_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.actionBara.buttonFinish').removeClass("buttonDisabled");
53. $('#div.actionBara.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. }
69. $(function(){
70. //对象初始化，以及设定相关回调时间
71. $('#sfxxdj_div').smartWizard({
72. keyNavigation:false,
73. onFinish:sfxxdj.onSubmit,
74. onNextStep:sfxxdj.nextStepCallback,
75. onShowStep:sfxxdj.showStepCallback
76. });
77. $(".actionBara").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. $('.actionBara.buttonFinish').removeClass("buttonDisabled");//提交按钮可用
2. $('.actionBara.buttonFinish').addClass("buttonDisabled");//提交按钮变灰
3. $('.actionBara.buttonNext').removeClass("buttonDisabled");//下一步按钮可用
4. $('.actionBara.buttonNext').addClass("buttonDisabled");//下一步按钮变灰
5. $('.actionBara.buttonPrevious').removeClass("buttonDisabled");//上一步按钮可用
6. $('.actionBara.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);