JQuery向导插件Step——第一个阉割版插件
如果使用过JQuery Steps的朋友一定会发现这个插件有一个缺点，就是页面在第一次进入的时候，会进行一次很明显的DOM重绘——页面会闪一下。
尤其是前端代码比较庞大的时候，效果更为明显。
为了解决这个问题，就想使用点轻量级的流程向导。于是网上搜了下，恰好园友有这样一个插件，感谢杨元
不过使用起来还是有点不太喜欢的地方：
- 1 tooltip样式比较简陋，不好看.
- 2 间距太窄了，没有响应式.
- 3 缺少一些上一步下一步的触发动作以及校验.
因此就根据ystep的源码以及JQuery.steps的流程，设计出了下面的插件。虽然使用上还不是完善，但是基本已经能满足JQuery.steps的要求了。
为什么说阉割版呢！主要是因为是从别人的代码上阉割下来的，所以再次对原作者表示感谢！
无图无真相：
喜欢的朋友，可以在github上找到代码，猛戳这里就行！
ystep浅谈
于是首先先阅读了下杨元朋友的源码，去掉了tooltip，代码一下子少了很多。
主要的结构如下
(function($){
$.fn.extend({
//初始化
loadStep: function(params){},
//跳转到指定步骤
setStep: function(step) {},
//获取当前步骤
getStep: function() {},
//下一个步骤
nextStep: function() {},
//上一个步骤
prevStep: function() {},
//通用节点查找
_searchStep: function (callback) {}
});
})(jQuery);
原理可以参考下面的图：
说白了就是一些仅显示为圆圈的LI元素，加上一个进度条。
进度条会按照当前索引的位置，显示进度！
源码修改
这里没有在计算的过程中去增加响应式，而是直接使用@media设置样式。这样方便使用的时候根据当前页面的流程节点的个数进行设置宽度。
@media (min-width: 1200px) {
/*调节总的宽度*/
.ystep-lg {
width: 800px;
}
/*调节进度条宽度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 600px;
}
/*调节各个原点之间的跨度*/
.ystep-lg li {
margin-right: 100px;
}
/*调节按钮位置*/
.step-button{
left: 800px;
}
}
在原有的基础上增加按钮以及校验代码：
loadStep: function(params){
//基础框架
var baseHtml = "<div class='ystep-container ystep-lg ystep-blue'>"+
"<ul class='ystep-container-steps'></ul>"+
"<div class='ystep-progress'>"+
"<p class='ystep-progress-bar'><span class='ystep-progress-highlight' style='width:0%'></span></p>"+
"</div>"+
"</div>";
//步骤框架
var stepHtml = "<li class='ystep-step ystep-step-undone'></li>";
var stepButtonHtml = "<div class='step-button'><button type='button' class='btn btn-default prevBtn' id='prevBtn'>上一步</button>"+
"<button type='button' class='btn btn-default nextBtn' id='nextBtn'>下一步</button></div>";
//支持填充多个步骤容器
$(this).each(function(i,n){
var $baseHtml = $(baseHtml),
$stepHtml = $(stepHtml),
$ystepContainerSteps = $baseHtml.find(".ystep-container-steps"),
arrayLength = 0,
$n = $(n),
i=0;
//步骤
arrayLength = params.steps.length;
for(i=0;i<arrayLength;i++){
var _s = params.steps[i];
//构造步骤html
$stepHtml.text(_s);
//将步骤插入到步骤列表中
$ystepContainerSteps.append($stepHtml);
//重置步骤
$stepHtml = $(stepHtml);
}
var $stepButtonHtml = $(stepButtonHtml);
$ystepContainerSteps.append($stepButtonHtml);
//插入到容器中
$n.append($baseHtml);
//绑定两个按钮
$("#prevBtn").click(function(){
var index = $n.getStep();
$n.prevStep();
params.afterChange(index-1,index);
});
$("#nextBtn").click(function(){
var index = $n.getStep();
if(!params.beforeChange(index,index+1)){
return;
}
$n.nextStep();
params.afterChange(index+1,index);
});
//默认执行第一个步骤
$n.setStep(1);
});
},
由于去除了一些不使用的参数，这样修改后，页面使用的时候直接绑定三个变量就可以了：
$(".ystep").loadStep({
steps:["发起","审核","募款","执行"],
beforeChange: function(nowIndex,nextIndex){},
afterChange: function(nowIndex,prevIndex){}
});
使用帮助
首先，需要引入github中的JS以及CSS等文件，并添加页面元素，使用class="ystep"进行标识。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/ystep.css">
</head>
<body>
<!-- ystep容器 -->
<div class="ystep"></div>
<!-- 引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 引入bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- 引入ystep插件 -->
<script src="js/ystep.js"></script>
</body>
</html>
其次，在页面底部增加初始化：
$(".ystep").loadStep({
steps:["发起","审核","募款","执行"],
beforeChange: function(nowIndex,nextIndex){
console.log("跳转前校验:"+nowIndex +" "+nextIndex);
if(nowIndex === 1 && nextIndex === 2 ){
return true;
}else if(nowIndex === 2 && nextIndex === 3){
return true;
}else if(nowIndex === 3 && nextIndex === 4){
return true;
}
return true;
},
afterChange: function(nowIndex,prevIndex){
console.log("跳转后动作:"+nowIndex +" "+prevIndex);
if(nowIndex <1 || nowIndex >5) return;
/*这里可以搭配其他的页面元素，实现tab页切换的效果
for(var i = 1; i <= 5; i++){
if(i === nowIndex){
$("#page"+i).css("display","block");
}else{
$("#page"+i).css("display","none");
}
}*/
if(nowIndex === 2 && prevIndex === 1){
}else if(nowIndex === 3 && prevIndex === 2){
}else if(nowIndex === 4 && prevIndex === 3){
}
}
});
最后，调整样式。在当前页的CSS文件中，可以自行根据流程节点的数目调整样式，进行覆盖。
@media (min-width: 768px) {
/*调节总的宽度*/
.ystep-lg {
width: 400px;
}
/*调节进度条宽度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 300px;
}
/*调节各个原点之间的跨度*/
.ystep-lg li {
margin-right: 0px;
}
/*调节按钮位置*/
.step-button{
left: 400px;
}
}
@media (min-width: 992px) {
/*调节总的宽度*/
.ystep-lg {
width: 600px;
}
/*调节进度条宽度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 450px;
}
/*调节各个原点之间的跨度*/
.ystep-lg li {
margin-right: 50px;
}
/*调节按钮位置*/
.step-button{
left: 600px;
}
}
@media (min-width: 1200px) {
/*调节总的宽度*/
.ystep-lg {
width: 800px;
}
/*调节进度条宽度*/
.ystep-lg .ystep-progress, .ystep-lg .ystep-progress-bar {
width: 600px;
}
/*调节各个原点之间的跨度*/
.ystep-lg li {
margin-right: 100px;
}
/*调节按钮位置*/
.step-button{
left: 800px;
}
}
JQuery向导插件Step——第一个阉割版插件的更多相关文章
- 自定义jQuery插件Step by Step
1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...
- python_way day17 jQuery表单验证，事件绑定，插件，文本框架，正则表达式
python_way day17 1.jQuery表单验证 dom事件绑定 jquery事件绑定 $.each return值的判断 jquery扩展方法 2.前段插件 3.jDango文本框架 4. ...
- [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...
- jQuery 关于ScrollableGridPlugin.js（固定表头）插件的逐步解析
以前写前台的时候需要用哪些效果从来都是有现成的东西拿来就用的,因为自己真的是有些懒,毫无探索精神,只重视结果,不追求过程. 这个ScrollableGridPlugin.js是从网上找到的一个具有固定 ...
- jQuery 使用 jQuery UI 部件工厂编写带状态的插件（翻译）
首先,我们要创建一个progress bar,它只允许我们简单的设置进度值.正如我们接下来将要看到的,我们需要通过调用 jQuery.widget 及其两个参数来实现这一操作,这两个参数分别是:将要创 ...
- jQuery 是javascript的一个库（常用插件、处理器）
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery就是javascript的一个库,把我 ...
- 阉割版BBBlack安装Debian
开门见山,直入主题 咸鱼入手3块阉割ARM板,经过快递近6天运输到手,不过价格便宜 东西下面这样的(借了咸鱼的图): 发现这块板是阉割版的国外beagleboard.org型号为BeagleBone ...
- 在ANTMINER(阉割版BeagleBone Black)运行Debain
开门见山,直入主题 咸鱼入手3块阉割ARM板,经过快递近6天运输到手,不过价格便宜 东西下面这样的(借了咸鱼的图): 发现这块板是阉割版的国外beagleboard.org型号为BeagleBone ...
- 做阉割版Salesforce难成伟大的TOB企业
https://www.lieyunwang.com/archives/446227 猎云注:当前中国市场环境下,有没有可能诞生一批SaaS级企业服务公司?东方富海合伙人陈利伟用三个方面基础性问题解答 ...
随机推荐
- Ubuntu上安装Minecraft服务器
Minecraft由于其独特的魅力吸引了很多玩家.不过游戏的乐趣只有在和朋友一起玩的时候才最有意思,所以很早以前我就想建设自己的服务器.但由于专业知识欠缺,没有实现. 最近接触了Linux服务器,所以 ...
- eclipse远程调试Hadoop
环境需求: 系统:window 10 eclipse版本:Mars Hadoop版本:2.6.0 资源需求:解压后的Hadoop-2.6.0,原压缩包自行下载:下载地址 丑话前头说: 以下的操作中,e ...
- Codevs 1021 （玛丽卡）
题目描述 Description 麦克找了个新女朋友,玛丽卡对他非常恼火并伺机报复. 因为她和他们不住在同一个城市,因此她开始准备她的长途旅行. 在这个国家中每两个城市之间最多只有一条路相通,并且我们 ...
- Java Environment Setting
As a non-Java developer, I am quit stuck in Java environment setting because I am not familiar with ...
- iOS 字符串转son json转字符串
+ (NSString*)dictionaryToJson:(NSDictionary *)dic { NSError *parseError = nil; NSData *jsonDa ...
- XCode一直显示"scanning for working copies"的解决办法
一个SVN上的项目,在本地重新CheckOut打开后,一直提示"scanning for working copies"且不能使用SVN的更新.提交等功能,当时想着晾它一晚上,看能 ...
- 结对开发训练（续）（郭林林&胡潇丹）
本次题目:求二维数组最大连续的子数组之和. 通过前两次对问题的分析,这次在拿到题目时,我们首先与前两次题目做对比,尤其与第二次的题目相比较,这是在第二次题目上的扩展,第二次的题目是此次题目的一个特例. ...
- jetty9 安装部署更改端口号
1.下载jetty 并解压到指定目录 2.更改默认端口号--在start.d中的http.ini中修改 3.启动服务 在jetty的根目录中输入命令 java -jar start.jar 服务就启 ...
- adapter.notifyDataSetChanged(); 没有反应
为什么是这样,以下是我总结的一些原因: 1.数据源没有更新,调用notifyDataSetChanged无效. 2.数据源更新了,但是它指向新的引用,调用notifyDataSetChanged无效. ...
- 微信公众号 扫码支付 模式二 demo
扫码支付 本文附有代码,在下方,如果不熟悉场景的可以看看下面的场景介绍 场景介绍 官网介绍地址:https://pay.weixin.qq.com/wiki/doc/api/native.php?ch ...