jquery的smartWizard插件使用方法

本是古典何须时尚 2022-08-05 16:17 407阅读 0赞

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

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

html中代码如下：

**\[html\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.    
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.           
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.

js代码如下：

**\[javascript\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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][view plain] [print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

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

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

**\[javascript\]**  [view plain][] [copy][view plain] [print][view plain] [?][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  $('\#sfxxdj\_div').smartWizard('skipTo',3);  
2.

[jquery.smartWizard-2.0.js]: http://download.csdn.net/detail/jiqimiao/6579441
[view plain]: http://blog.csdn.net/jiqimiao/article/details/16839721#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/74153
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/74153/fork