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

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

html中代码如下:

  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. </ul>
  17. <div id="sfxxdj_step_1"  style="overflow: auto;">
  18. <table cellpadding="0" cellspacing="0" border="0" class="wi-frm-tbl" style="width:100%; height:500px;line-height:50px">
  19. <th valign="top"><h1>请选择身份类型:</h1></br>
  20. <h1><input type="radio" name="jjdj_lx" id="jjdj_ctgs" value="1">
  21. 公司</h1></br>
  22. <h1><input type="radio" name="jjdj_lx" id="jjdj_glgs" value="3">
  23. 个人</h1></th>
  24. </table>
  25. </div>
  26. <div id="sfxxdj_step_2"  style="overflow: auto;">
  27. <!--内容可直接在这加入,如果内容过大可直接载入html -->
  28. </div>
  29. <div id="sfxxdj_step_3"  style="overflow: auto;">
  30. </div>
  31. <div id="sfxxdj_step_4"  style="overflow: auto;">
  32. </div>
  33. </div>
  34. <!-- End SmartWizard Content -->

js代码如下:

[javascript] view plaincopyprint?

 
  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. $(function(){
  69. //对象初始化,以及设定相关回调时间
  70. $('#sfxxdj_div').smartWizard({
  71. keyNavigation: false,
  72. onFinish    : sfxxdj.onSubmit,
  73. onNextStep  : sfxxdj.nextStepCallback,
  74. onShowStep  : sfxxdj.showStepCallback
  75. });
  76. $( ".actionBar a" ).button();
  77. //文件形式初始化各步骤的内容
  78. $('#sfxxdj_step_2').html("").load('jbqkb.html');
  79. $('#sfxxdj_step_3').html("").load('xlqkb.html');
  80. $('#sfxxdj_step_4').html("").load('gzqkb.html');
  81. }

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

[javascript] view plaincopyprint?

 
  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 plaincopyprint?

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

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

[javascript] view plaincopyprint?

 
  1. $('#sfxxdj_div').smartWizard('skipTo',3);
原文出自:http://blog.csdn.net/lishuangzhe7047/article/details/43017461

jquery的smartWizard插件使用方法的更多相关文章

  1. 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法

    某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图:      这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...

  2. jquery validate验证插件扩展方法(转)

    /***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...

  3. jQuery颜色面板插件

    /** * jQuery颜色面板插件 * * 使用方法:input框的id默认为inputObj,button框的id默认为btnObj,也可以自定义aaa,bbb * 1.初始化颜色面板:$.col ...

  4. jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...

  5. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  6. jQuery插件之Cookie插件使用方法~

    一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js  有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...

  7. jQuery.cookie.js插件了解及使用方法

    jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...

  8. 编写基于jQuery的插件的方法

    注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...

  9. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

随机推荐

  1. 腾讯QQ表情为什么如此成功呢

    本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...

  2. jQuery自己编写插件()

    引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...

  3. 发送邮件(遵循smtp协议即简单的邮件发送协议)

    HandleSendEmail.aspx逻辑 protected void Page_Load(object sender,EventArgs e) { foreach(var item in Req ...

  4. ACE_linux:Reactor与Proactor两种模式的区别

    一.概念: Reactor与Proactor两种模式的区别.这里我们只关注read操作,因为write操作也是差不多的.下面是Reactor的做法: 某个事件处理器宣称它对某个socket上的读事件很 ...

  5. php session的应用举例

    本文原始链接:http://www.jbxue.com/article/9281.html 1,session可以保存任意类型的数据.因为是保存在服务器上的(即已经序列化). 2,session运行机 ...

  6. ubuntu安装QQ目前最完善的方法!(亲测,成功)

    wine qq 2012 for linux Ubuntu 64位兼容(12月21日末日版) 由 smile » 2011-04-07 9:08 +-------------------------- ...

  7. SIM900A访问HTTP的简单方法

    最近做项目,使用Arduino控制设备,读取数据,然后通过移动网络传送到服务器. 我选用的是正点原子的SIM900A模块.在服务器部署了一个监听程序,Arduino控制SIM900A通过TCP方式把数 ...

  8. WRS是什么?

    全球参考系(WRS)是为卫星下行数据服务而建立的一种全球符号坐标系统,本文详细介绍了Landsat卫星的轨道特性,给出了相应的WRS网格坐标位置的估算方法,并给出了估算的结果。对该方法的研究为地面应用 ...

  9. 一个Makefile

    CC = g++ CCFLAGS = -O3 -DNDEBUG INC = -I ../../include SRC = $(wildcard *.cpp) OBJ = $(patsubst %.cp ...

  10. MySQL中字符串函数详细介绍

    MySQL字符串函数对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str)返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL,返回N ...