jquery的smartWizard插件使用方法
下面说一下如何使用,首先html中引入jquery的smartWizard插件对应的jquery.smartWizard-2.0.js
html中代码如下:
- <!--html 中 -->
- <div id="sfxxdj_div" class="swMain">
- <ul id="sfxxdj_wizard_ul">
- <li><a href="#sfxxdj_step_1"> <label class="stepNumber">1</label>
- <span class="stepDesc">选择身份类型</span> </a>
- </li>
- <li><a href="#sfxxdj_step_2"> <label class="stepNumber">1</label>
- <span class="stepDesc">基本信息表</span> </a>
- </li>
- <li><a href="#sfxxdj_step_3"> <label class="stepNumber">2</label>
- <span class="stepDesc">学历情况表</span> </a>
- </li>
- <li><a href="#sfxxdj_step_4"> <label class="stepNumber">3</label>
- <span class="stepDesc">工作情况表</span> </a>
- </li>
- </ul>
- <div id="sfxxdj_step_1" style="overflow: auto;">
- <table cellpadding="0" cellspacing="0" border="0" class="wi-frm-tbl" style="width:100%; height:500px;line-height:50px">
- <th valign="top"><h1>请选择身份类型:</h1></br>
- <h1><input type="radio" name="jjdj_lx" id="jjdj_ctgs" value="1">
- 公司</h1></br>
- <h1><input type="radio" name="jjdj_lx" id="jjdj_glgs" value="3">
- 个人</h1></th>
- </table>
- </div>
- <div id="sfxxdj_step_2" style="overflow: auto;">
- <!--内容可直接在这加入,如果内容过大可直接载入html -->
- </div>
- <div id="sfxxdj_step_3" style="overflow: auto;">
- </div>
- <div id="sfxxdj_step_4" style="overflow: auto;">
- </div>
- </div>
- <!-- End SmartWizard Content -->
js代码如下:
- var sfxxdj = {
- //当点下一步时回调该函数,一般用于当前步骤的校验
- nextStepCallback : function(stepObj){
- var step_num= stepObj.attr('rel');
- switch (step_num) {
- case '1':
- if($('input[name=jjdj_lx]:checked').val()>0){
- sfxxdj.jjlx = $('input[name=jjdj_lx]:checked').val();
- if(sfxxdj.jjlx=='1'){
- $('#sfxxdj_wizard_ul [rel=5]').hide();
- $('#sfxxdj_step_5').hide();
- }else{
- $('#sfxxdj_wizard_ul [rel=2]').hide();
- }
- return true;//转下一步
- }
- else{
- alert("请选择基金登记类型!");
- return false;
- }
- case '2':
- if(sfxxdj.jjlx=='1'&&$("#sfxxdj_jbqkb_jjmc").val()==''){
- alert("请输入基金名称!");
- return false;
- }else{
- sfxxdj.jjmc=$("#sfxxdj_jbqkb_jjmc").val();
- }
- return true;
- case '3':
- return true;
- case '4':
- return true;
- case '5':
- return true;
- case '6':
- default:
- break;
- }
- return true;
- },
- //当现实该步骤时回调该函数,一般用于当前步骤的初始化
- showStepCallback : function(stepObj){
- var step_num= stepObj.attr('rel');
- switch (step_num) {
- case '2':
- break;
- case '3':
- break;
- case '4':
- $("#jjxmmc").text(sfxxdj.jjmc);
- if(sfxxdj.jjlx=="1"){
- $('#div .actionBar a.buttonFinish').removeClass("buttonDisabled");
- $('#div .actionBar a.buttonNext').addClass("buttonDisabled");
- }
- break;
- case '5':
- if(sfxxdj.b4=="0"){
- settWtjj();
- }
- break;
- case '6':
- break;
- default:
- break;
- }
- }
- }
- $(function(){
- //对象初始化,以及设定相关回调时间
- $('#sfxxdj_div').smartWizard({
- keyNavigation: false,
- onFinish : sfxxdj.onSubmit,
- onNextStep : sfxxdj.nextStepCallback,
- onShowStep : sfxxdj.showStepCallback
- });
- $( ".actionBar a" ).button();
- //文件形式初始化各步骤的内容
- $('#sfxxdj_step_2').html("").load('jbqkb.html');
- $('#sfxxdj_step_3').html("").load('xlqkb.html');
- $('#sfxxdj_step_4').html("").load('gzqkb.html');
- }
网上的参考资料不是很多,我也只是稍微应用了一下,最后说一下我了解的技巧,默认情况下上一步和下一步以及提交按钮需要人工来控制,哪些需要对按钮进行添加移除样式,如下:
- $('.actionBar a.buttonFinish').removeClass("buttonDisabled");//提交按钮可用
- $('.actionBar a.buttonFinish').addClass("buttonDisabled");//提交按钮变灰
- $('.actionBar a.buttonNext').removeClass("buttonDisabled");//下一步按钮可用
- $('.actionBar a.buttonNext').addClass("buttonDisabled");//下一步按钮变灰
- $('.actionBar a.buttonPrevious').removeClass("buttonDisabled");//上一步按钮可用
- $('.actionBar a.buttonPrevious').addClass("buttonDisabled");//上一步按钮变灰
如何手动激活一个步骤的,或者如何跳过步骤呢?操作如下:
比如直接激活第四步骤可点击:
- $('#sfxxdj_wizard_ul [rel=4]').attr("isDone",1);
- $('#sfxxdj_wizard_ul [rel=4]').addClass("done").removeClass("disabled");
这样不管你进行的是否做到第四步,都可以点击查看第四步的内容。
比如某些时候我们需要从第一步调转到第三步:
- $('#sfxxdj_div').smartWizard('skipTo',3);
jquery的smartWizard插件使用方法的更多相关文章
- 购物车增加、减少商品时动画效果:jQuery.Fly.js插件使用方法
某些电商网站加入购物车和减少购物车商品数量时,有个小动画,以抛物线形式增减,如图: 这里用到了第三方jQuery.Fly.js插件(底层依赖Jquery库,地址:https://github ...
- jquery validate验证插件扩展方法(转)
/***************************************************************** jQuery Validate扩展验证方法 (linjq) *** ...
- jQuery颜色面板插件
/** * jQuery颜色面板插件 * * 使用方法:input框的id默认为inputObj,button框的id默认为btnObj,也可以自定义aaa,bbb * 1.初始化颜色面板:$.col ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- jQuery插件之Cookie插件使用方法~
一.介绍 1-1.jQuery.Cookie.js插件是一个轻量级的Cookie管理插件.下载地址:jQuery-cookie.js 有需要的朋友,右键另存为即可! 二.使用方法 2-1.引入jQu ...
- jQuery.cookie.js插件了解及使用方法
jquery.cookie.js插件实现浏览器的cookie存储,该插件是基于jquery开发,方便cookie使用. jquerycookie.js的下载地址 http://plugins.jque ...
- 编写基于jQuery的插件的方法
注意:jQuery中有一个extend的方法,这个方法是添加js对象字段的,下面会多次用到 1:添加全局类的方法 常用的ajax就是该类插件,下面要编写一个简单的加法和减法的基于jQuery的方法 $ ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
随机推荐
- OpenCV3添加滑动条和鼠标事件到图形界面
鼠标事件和滑动条控制在计算机视觉和OpenCV中非常有用,使用这些控件,用户可以直接与图形界面交互,改变输入图像或者变量的属性值. /* In this section, we are going t ...
- 利器: 用Siege做Web服务器压测
用「Web压测」关键词检索,能找到好多进行压测的工具,比如ab.Http_load.Webbench.Siege这些,不过今天并不是要对这些工具做对比,毕竟我们只是想得到一个结果.本文主要介绍Sieg ...
- 弹性布局学习-详解 justify-content(三)
弹性布局学习-详解 justify-content(三)
- jquery 获取 CheckBox 的状态
<td style="width:220px;vertical-align:central;"><input type="checkbox" ...
- VB.Net 文件处理类
1.编写日志 2.本地文件的读取和写入 3.Base64与图片的互相转换 Imports System.IO Imports System.Text Public Class Cls_File #Re ...
- C++ 编写 CorelDRAW CPG 插件例子(2)—ClearFill
这是另一个例子: 贴上主要代码: #include "stdafx.h" #include <tchar.h> #import "libid:95E23C91 ...
- Spark Streaming揭秘 Day8 RDD生命周期研究
Spark Streaming揭秘 Day8 RDD生命周期研究 今天让我们进一步深入SparkStreaming中RDD的运行机制.从完整的生命周期角度来说,有三个问题是需要解决的: RDD到底是怎 ...
- 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 ...
- sql表连接left join,right join,inner join三者之间的区别
sql表连接left join,right join,inner join区别 left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 (以左表数据为基准,不足补为NULL) ...
- 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 ...