jquery的smartWizard插件使用方法

jquery 的smartWizard插件常用在一些向导式的，按步骤的功能中，是的用户按照我们设定的步骤进行操作，这样一方面有较好的用户体验，可以将庞大的表格数据分解成多个步骤，是的每个步骤的数据量减少；另一方面流程比较清晰，先做那个下一步做什么都是可控可设定的。

下面说一下如何使用，首先html中引入jquery的smartWizard插件对应的jquery.smartWizard-2.0.js

html中代码如下：

[html] view plaincopyprint?

<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;">
</div>
<div id="sfxxdj_step_3" style="overflow: auto;">
</div>
<div id="sfxxdj_step_4" style="overflow: auto;">
</div>
</div>

js代码如下：

[javascript] view plaincopyprint?

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');
}

网上的参考资料不是很多，我也只是稍微应用了一下，最后说一下我了解的技巧，默认情况下上一步和下一步以及提交按钮需要人工来控制，哪些需要对按钮进行添加移除样式,如下：

[javascript] view plaincopyprint?

$('.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");//上一步按钮变灰

如何手动激活一个步骤的，或者如何跳过步骤呢？操作如下：

比如直接激活第四步骤可点击：

[javascript] view plaincopyprint?

$('#sfxxdj_wizard_ul [rel=4]').attr("isDone",1);
$('#sfxxdj_wizard_ul [rel=4]').addClass("done").removeClass("disabled");

这样不管你进行的是否做到第四步，都可以点击查看第四步的内容。
比如某些时候我们需要从第一步调转到第三步：

[javascript] view plaincopyprint?

$('#sfxxdj_div').smartWizard('skipTo',3);

原文出自：http://blog.csdn.net/lishuangzhe7047/article/details/43017461

转载于:https://www.cnblogs.com/challengeof/p/4281862.html

jquery的smartWizard插件使用方法相关推荐

JQuery的iCheck插件使用方法
iCheck 概要表单复选框.单选框控件美化插件,主要作用为: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件页面引用 css部分 1 <!-- iCheck for ch ...
jquery订阅发布插件代码草稿，为jquery扩展jquery.publish，jquery.subscribe方法
jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...
jquery封装插件的方法
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门编写一个jQuery插件开始于给jQuery.fn ...
jQuery的DataTables插件的使用方法[转]
转自:http://www.guoxk.com/node/jquery-datatables 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的 ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
Lazy Line Painter – 很有趣的 jQuery 路径动画插件
Lazy Line Painter 是基于 Raphaël(一个用于在网页中绘制矢量图形的 Javascript 库)的 jQuery 路径动画插件,能够把线条图案转换为吸引眼球的路径动画模式. 您可 ...
我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
jQuery 图片剪裁插件初探之 Jcrop
主页:http://deepliquid.com/content/Jcrop.html 官方下载地址:http://deepliquid.com/content/Jcrop_Download.html ...

jquery的smartWizard插件使用方法

jquery的smartWizard插件使用方法相关推荐

最新文章

热门文章