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. mvc的删除

    有UserInfo一个实体类,db代表请求上下文 属性有ID,UserName,UserPass,Email var users=from c in db.UserInfo select c; var ...

  2. 如何保证写出来的程序没BUG

  3. table 中实现 控制 指定列的 左对齐 右对齐方式

    .listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...

  4. Wpf 简单制作自己的窗体样式

    最近一直在搞wpf相关的东东,由于还在门外徘徊,所以第一篇blog写了简单的制作扁平化的wpf button样式,这一篇也简单的制作属于自己wpf 窗体的样式. 废话少说,下面就开始制作自己的窗体样式 ...

  5. HTML 菜单 a 标签设置样式

    html: "<div style='font-weight:800;color:red'> <a href='javascript:void(0)'style='colo ...

  6. EXTJS 3.0 资料 控件之 Toolbar 两行的用法

    var toolbarCarType = new Ext.Toolbar({ //width: 500, //autoWidth:true, pressed: false, toggleGroup: ...

  7. POJ 2411 压缩状态DP

    这个题目非常赞! 给定一个矩形,要求用1*2 的格子进行覆盖,有多少种覆盖方法呢? dp[i][j] 当状态为j,且第i行已经完全铺满的情况下的种类数有多少种?j中1表示占了,0表示没有被占. 很显然 ...

  8. vc编程时说“Cannot open include file: 'unistd.h': No such file or directory”

    本文专自http://blog.csdn.net/mangobar/article/details/6314700 unistd.h是unix standard header之意,因此,Linux下开 ...

  9. log4j示例

    示例代码:此示例从控制台输入日志,设置了输出等级. # # Log4J Settings for log4j 1.2.x (via jakarta-commons-logging) # # The f ...

  10. uva 11461

    简单 打个表 case数不超过200 数据比较水  木有超时的风险~~ /*************************************************************** ...