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. ...
随机推荐
- mvc的删除
有UserInfo一个实体类,db代表请求上下文 属性有ID,UserName,UserPass,Email var users=from c in db.UserInfo select c; var ...
- 如何保证写出来的程序没BUG
- table 中实现 控制 指定列的 左对齐 右对齐方式
.listTable{ border-collapse:collapse; border-top:1px solid #8c9594; border-right:1px solid #8c9594; ...
- Wpf 简单制作自己的窗体样式
最近一直在搞wpf相关的东东,由于还在门外徘徊,所以第一篇blog写了简单的制作扁平化的wpf button样式,这一篇也简单的制作属于自己wpf 窗体的样式. 废话少说,下面就开始制作自己的窗体样式 ...
- HTML 菜单 a 标签设置样式
html: "<div style='font-weight:800;color:red'> <a href='javascript:void(0)'style='colo ...
- EXTJS 3.0 资料 控件之 Toolbar 两行的用法
var toolbarCarType = new Ext.Toolbar({ //width: 500, //autoWidth:true, pressed: false, toggleGroup: ...
- POJ 2411 压缩状态DP
这个题目非常赞! 给定一个矩形,要求用1*2 的格子进行覆盖,有多少种覆盖方法呢? dp[i][j] 当状态为j,且第i行已经完全铺满的情况下的种类数有多少种?j中1表示占了,0表示没有被占. 很显然 ...
- 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下开 ...
- log4j示例
示例代码:此示例从控制台输入日志,设置了输出等级. # # Log4J Settings for log4j 1.2.x (via jakarta-commons-logging) # # The f ...
- uva 11461
简单 打个表 case数不超过200 数据比较水 木有超时的风险~~ /*************************************************************** ...