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. ...
随机推荐
- 腾讯QQ表情为什么如此成功呢
本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...
- jQuery自己编写插件()
引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...
- 发送邮件(遵循smtp协议即简单的邮件发送协议)
HandleSendEmail.aspx逻辑 protected void Page_Load(object sender,EventArgs e) { foreach(var item in Req ...
- ACE_linux:Reactor与Proactor两种模式的区别
一.概念: Reactor与Proactor两种模式的区别.这里我们只关注read操作,因为write操作也是差不多的.下面是Reactor的做法: 某个事件处理器宣称它对某个socket上的读事件很 ...
- php session的应用举例
本文原始链接:http://www.jbxue.com/article/9281.html 1,session可以保存任意类型的数据.因为是保存在服务器上的(即已经序列化). 2,session运行机 ...
- ubuntu安装QQ目前最完善的方法!(亲测,成功)
wine qq 2012 for linux Ubuntu 64位兼容(12月21日末日版) 由 smile » 2011-04-07 9:08 +-------------------------- ...
- SIM900A访问HTTP的简单方法
最近做项目,使用Arduino控制设备,读取数据,然后通过移动网络传送到服务器. 我选用的是正点原子的SIM900A模块.在服务器部署了一个监听程序,Arduino控制SIM900A通过TCP方式把数 ...
- WRS是什么?
全球参考系(WRS)是为卫星下行数据服务而建立的一种全球符号坐标系统,本文详细介绍了Landsat卫星的轨道特性,给出了相应的WRS网格坐标位置的估算方法,并给出了估算的结果。对该方法的研究为地面应用 ...
- 一个Makefile
CC = g++ CCFLAGS = -O3 -DNDEBUG INC = -I ../../include SRC = $(wildcard *.cpp) OBJ = $(patsubst %.cp ...
- MySQL中字符串函数详细介绍
MySQL字符串函数对于针对字符串位置的操作,第一个位置被标记为1. ASCII(str)返回字符串str的 最左面字符的ASCII代码值.如果str是空字符串, 返回0.如果str是NULL,返回N ...