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. OpenCV3添加滑动条和鼠标事件到图形界面

    鼠标事件和滑动条控制在计算机视觉和OpenCV中非常有用,使用这些控件,用户可以直接与图形界面交互,改变输入图像或者变量的属性值. /* In this section, we are going t ...

  2. 利器: 用Siege做Web服务器压测

    用「Web压测」关键词检索,能找到好多进行压测的工具,比如ab.Http_load.Webbench.Siege这些,不过今天并不是要对这些工具做对比,毕竟我们只是想得到一个结果.本文主要介绍Sieg ...

  3. 弹性布局学习-详解 justify-content(三)

    弹性布局学习-详解 justify-content(三)

  4. jquery 获取 CheckBox 的状态

    <td style="width:220px;vertical-align:central;"><input type="checkbox" ...

  5. VB.Net 文件处理类

    1.编写日志 2.本地文件的读取和写入 3.Base64与图片的互相转换 Imports System.IO Imports System.Text Public Class Cls_File #Re ...

  6. C++ 编写 CorelDRAW CPG 插件例子(2)—ClearFill

    这是另一个例子: 贴上主要代码: #include "stdafx.h" #include <tchar.h> #import "libid:95E23C91 ...

  7. Spark Streaming揭秘 Day8 RDD生命周期研究

    Spark Streaming揭秘 Day8 RDD生命周期研究 今天让我们进一步深入SparkStreaming中RDD的运行机制.从完整的生命周期角度来说,有三个问题是需要解决的: RDD到底是怎 ...

  8. Battle Over Cities (25)(DFS、连通图)

    It is vitally important to have all the cities connected by highways in a war. If a city is occupied ...

  9. sql表连接left join,right join,inner join三者之间的区别

    sql表连接left join,right join,inner join区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 (以左表数据为基准,不足补为NULL) ...

  10. How to open MS word document from the SharePoint 2010 using Microsoft.Office.Interop.dll

    or this you must change the identity of word component inC:\windows\System32\comexp.mscto be interac ...