multiSteps 基于Jquery的多步骤滑动切换插件


Posted in Javascript onJuly 22, 2011

插图:在支持Html5浏览器下观看会有更加体验
其中IE9以下版本使用滤镜模拟了一个阴影,删掉此处内容,IE下运行会更加平滑(至少我的老爷机运行更平滑了。)
第一步插图:
启动函数需要返回值,在这个启动函数里面你可以为所欲为,但是在你坏事做完之后必须返回一个值,
被发现,那你就得停下来等待处理结果,那么就返回false,无法继续执行,
没有被发现那就赶紧的离开这里,返回true,继续执行到下一步!

multiSteps 基于Jquery的多步骤滑动切换插件

第二步插图:跳出的提示是第一步执行完毕之后的回调函数

回调函数没有返回值,事实上,执行回调函数的时候已经脱离插件,你在这里可以做任何你想做的事!
multiSteps 基于Jquery的多步骤滑动切换插件

第三步执行完成:
multiSteps 基于Jquery的多步骤滑动切换插件
Demo中另一页面演示更多层调用。
插件说明:
调用方式 $('obj').multiSteps({options});
支持回调函数,支持启动函数(开始滑动之前)
可以设置的参数列表:

{ // Global defaults 
showOn: 'click', // 'click' or 'mouseOn' 
showAnim: 'leftRight', // 暂时定义等待扩展,未使用 
slidefor: 'next', 
showSpeed: 1000, //滑动速度,越小越快 
beforeSlide: null, //进行滑动之前执行的函数 
callback: null //callback 
};

调用方式你可以单独对每个按钮调用:
$("#step_one").multiSteps({beforeSlide:_beforeSlide,callback:_callback}); 
$(".prevStep").multiSteps({slidefor:'prev'}); 
$("#step_two").multiSteps({callback:function(){alert("第二步执行完成")}});

也可以用这种方式调用:$(".classs:not(.lastStep)").multiSteps();
已知的插件bug:
因时间仓促,插件的上一步操作,只进行了简单的可逆操作,
在宽度自适应的时候会存在问题:(上一步操作存在此问题)
当前步骤的前(后)两步在页面放大之后会出现在视野中,需要注意。
解决方法:
_getSteps中增加返回值oldstep(当前步骤的前(后)两步)
然后在_styleSteps中的left或right定位设置为一个不可见位置即可。
可等待我发布下一版本修订或者自己修改,修改后请告知,谢谢
完整演示Demo下载
完整插件代码以及部分注释:
/** * @Version:1.0.0 
* @date : 2011-07-20 
* @Email : Ethan.zhu83@gmail.com 
* @QQ : 12377166 
* @Name :multiSteps(多步骤滑动切换) 
* 
插件原型:http://www.groupon.com/ 首页的注册功能,她的功能(最多支持3步,不具有通用性) 
插件参考了ui中日历的编写思路 
因时间仓促,插件的上一步操作,只进行了简单的可逆操作, 
在宽度自适应的时候会存在问题:(上一步操作存在此问题) 
当前步骤的前(后)两步在页面放大之后会出现在视野中,需要注意。 
解决: 
getSteps中增加返回值oldstep(当前步骤的前(后)两步) 
然后在styleSteps中的left或right定位设置为一个不可见位置即可。 
可等待下一版本修订或者自己修改,修改后请告知,谢谢! 
**/ 
(function($,undefined){ 
var PROP_NAME = 'multiSteps'; 
function MultiSteps(){ 
this.debug = false; // Change this to true to start debugging 
this._position = '.main-wrap';//滑动的定位对象 
this._formSteps = '.form_step';//滑动的对象组 
this._currentStep = 1; //在改变窗口大小的时候用来获取当前显示位置 
this._offset = 20; //左右划出内容显示的大小 
this.regional = []; // 这里可以增加另外的可配置信息 
this._defaults = { // Global defaults 
showOn: 'click', // 'focus' or 'mouseOn' 
showAnim: 'leftRight', // 暂时定义等待扩展,未使用 
slidefor: 'next', 
showSpeed: 1000, //滑动速度,越小越快 
beforeSlide: null, //进行滑动之前执行的函数 
callback: null //callback 
}; 
$.extend(this._defaults, this.regional['']); 
}; 
$.extend(MultiSteps.prototype, { 
markerClassName: 'hasMultiSteps', 
/* Debug logging (if enabled). */ 
log: function () { 
if (this.debug) 
console.log.apply('', arguments); 
}, 
/* Override the default settings for all instances of the MultiSteps. 
@param settings object - the new settings to use as defaults (anonymous object) 
@return the manager object */ 
setDefaults: function(settings) { 
extendRemove(this._defaults, settings || {}); 
return this; 
}, 
/* Attach the date picker to a jQuery selection. 
@param target element - the target input field or division or span 
@param settings object - the new settings to use for this date picker instance (anonymous) */ 
_attachMultiSteps: function(target, settings) { 
//alert("_attachMultiSteps"); 
var inlineSettings = null; 
for (var attrName in this._defaults) { 
var attrValue = target.getAttribute('date:' + attrName); 
if (attrValue) { 
inlineSettings = inlineSettings || {}; 
try { 
inlineSettings[attrName] = eval(attrValue); 
} catch (err) { 
inlineSettings[attrName] = attrValue; 
} 
} 
} 
//var nodeName = target.nodeName.toLowerCase(); 
//var inline = (nodeName == 'div' || nodeName == 'span'); 
if (!target.id) { 
this.uuid += 1; 
target.id = 'ms' + this.uuid; 
} 
var inst = this._newInst($(target)); 
inst.settings = $.extend({}, settings || {}, inlineSettings || {}); 
this._connectMultiSteps(target,inst); 
}, 
/* Attach the date picker to an input field. */ 
_connectMultiSteps: function(target, inst) { 
var target = $(target); 
inst.append = $([]); 
inst.trigger = $([]); 
if (target.hasClass(this.markerClassName)) 
return; 
this._attachments(target, inst); 
target.addClass(this.markerClassName); 
$.data(target, PROP_NAME, inst); 
}, 
/* Make attachments based on settings. */ 
_attachments: function(target, inst) { 
//alert("_attachments"); 
if (inst.trigger) 
inst.trigger.remove(); 
var showOn = this._get(inst, 'showOn'); 
var currentStep=$(target).parents(this._formSteps).index()+1; 
if(currentStep==1) 
this._styleSteps(target,false,currentStep); 
//this._forward(target,showSpeed,step); 
if (showOn == 'mouseOn'){ 
target.mouseover(function(){ 
$.multiSteps._showMultiSteps(target); 
}); 
} 
if (showOn == 'click') { 
inst.trigger=target.click(function() { 
$.multiSteps._showMultiSteps(target); 
return false; 
}); 
} 
}, 
_showMultiSteps: function(target) { 
var inst = $.multiSteps._getInst(target); 
var showSpeed = this._get(inst, 'showSpeed'); 
var beforeSlide = this._get(inst, 'beforeSlide'); 
var slidefor = this._get(inst, 'slidefor'); 
var step = $(target).parents(this._formSteps).index() 
var stepSize =$(this._formSteps).size(); 
//extendRemove(inst.settings, (beforeSlide ? beforeSlide.apply() : {})); 
if((beforeSlide ? beforeSlide.apply() : {})){ 
if(slidefor=='next'){ 
var step = step+1+1; 
$.multiSteps._currentStep++; 
if(step-1!=stepSize) 
this._forward(target,showSpeed,step); 
} 
if(slidefor=='prev'){ 
//alert(step) 
$.multiSteps._currentStep--; 
this._forward(target,showSpeed,step); 
} 
} 
}, 
_forward: function(target,animSpeed,step) { 
this._styleSteps( target,animSpeed,step); 
}, 
_styleSteps: function(target,animSpeed,step) { 
var inst = $.multiSteps._getInst(target); 
//alert(inst); 
this._currentStep = step 
pos = this._getPositions(); 
var steps = this._getSteps(target,step); 
var slidefor 
if(inst!=null) 
slidefor = $.multiSteps._get(inst,'slidefor'); 
if ( !animSpeed ) { 
$( '.' + steps.prev ).css( { left: pos.left + 'px', opacity: 0.3 }); 
$( '.' + steps.curr ).css( { left: pos.center + 'px', opacity: 1 }); 
$( '.' + steps.next ).css( { left: pos.right + 'px', opacity: 0.3 }); 
} else { 
$( '.' + steps.prev ).animate( { left: pos.left + 'px', opacity: 0.3 }, animSpeed ); 
$( '.' + steps.curr ).animate( { left: pos.center + 'px', opacity: 1 }, 
//{ duration: animSpeed, complete:$.multiSteps._callback(steps.curr,target,step)}//, 
{ duration: animSpeed, 
//specialEasing: '', 
complete:function(){ 
$(this).stop(); 
if(!$.multiSteps.resizing){ 
if(step>1){ 
var callback = $.multiSteps._get(inst, 'callback'); 
extendRemove(inst.settings, (callback ? callback.apply() : {})); 
} 
} 
$.multiSteps.resizing=false; 
} 
} 
); 
// 
//alert(slidefor); 
//if(slidefor=='next') 
$( '.' + steps.next ).css( { left: pos.right + 'px', opacity: 0.3 }); 
/* else if(slidefor=='prev'){ 
alert(pos.right); 
alert(steps.next); 
alert(steps.curr); 
$( '.' + steps.next ).animate( { left: pos.right + 'px', opacity: 0.3 },animSpeed); 
}*/ 
} 
}, 
_getSteps: function(target,step) { 
var currentStep=step; 
var stepSize =$(this._formSteps).size(); 
var curr_step = 'step_'+ currentStep; 
var prev_step = ( currentStep == 1&& currentStep<(stepSize+1)) ? null : 'step_'+ (currentStep-1); 
var next_step = ( currentStep == stepSize ) ? null : 'step_'+ (currentStep+1); 
return {curr: curr_step, prev: prev_step, next: next_step }; 
}, 
_getPositions: function() { 
var offset = this._offset; 
var step_width = $(this._formSteps).width() / 2; 
//var window_width = $( window ).width(); 
var window_width = $(this._position).width(); 
//alert(window_width) 
var offLeft = -3 * step_width; 
var leftPos = offset - step_width; 
var centerPos = window_width / 2; 
var rightPos = window_width - offset + step_width; 
var offRight = rightPos + ( 3 * step_width ); 
return { offLeft: offLeft, left: leftPos, center: centerPos, right: rightPos, offRight: offRight }; 
}, 
_pageRedraw: function() { 
//$.multiSteps.resizing = false; 
//alert($.multiSteps._currentStep); 
//alert(currentStep); 
$.multiSteps._styleSteps(this,300,$.multiSteps._currentStep); 
}, 
/* Create a new instance object. */ 
_newInst: function(target) { 
var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\\\$1'); // escape jQuery meta chars 
return { 
id: id, 
obj: target 
}; 
}, 
/* Get a setting value, defaulting if necessary. */ 
_get: function(inst, name) { 
return inst.settings[name] !== undefined ? 
inst.settings[name] : this._defaults[name]; 
}, 
/* Retrieve the instance data for the target control. 
@return object - the associated instance data 
@throws error if a jQuery problem getting data */ 
_getInst: function(target) { 
try { 
return $.data(target, PROP_NAME); 
} 
catch (err) { 
throw 'Missing instance data'; 
} 
} 
}); 
$( window ).resize( function() { 
$.multiSteps.resizing = true; 
//alert($.multiSteps.resizing); 
if ( $.multiSteps.resizeTimer != null || $.multiSteps.resizeTimer =="undefined" ) { 
window.clearTimeout( $.multiSteps.resizeTimer ); 
} 
$.multiSteps.resizeTimer = window.setTimeout( $.multiSteps._pageRedraw, 300 ); 
}); 
/* jQuery extend now ignores nulls! */ 
function extendRemove(target, props) { 
$.extend(target, props); 
for (var name in props){ 
//alert(name); 
if (props[name] == null || props[name] == undefined) 
target[name] = props[name]; 
} 
return target; 
}; 
/* Determine whether an object is an array. */ 
function isArray(a) { 
return (a && (($.browser.safari && typeof a == 'object' && a.length) || 
(a.constructor && a.constructor.toString().match(/\Array\(\)/)))); 
}; 
$.fn.multiSteps = function(options){ 
/* Verify an empty collection wasn't passed - Fixes #6976 */ 
if ( !this.length ) { 
return this; 
} 
/* var otherArgs = Array.prototype.slice.call(arguments, 1); 
//arguments函数对象是该对象代表正在执行的函数和调用它的函数的参数 
//如果传入的是参数设置,则将这些内容拷贝到otherArgs数*/ 
return this.each(function() { 
$.multiSteps._attachMultiSteps(this, options); 
}); 
}; 
$.multiSteps = new MultiSteps(); // singleton instance 
$.multiSteps.resizing = false; 
$.multiSteps.resizeTimer = null; 
$.multiSteps.uuid = new Date().getTime(); 
})(jQuery)
Javascript 相关文章推荐
javascript知识点收藏
Feb 22 Javascript
JS 建立对象的方法
Apr 21 Javascript
轻轻松松学JS调试(不下载任何工具)
Apr 14 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
vue实现新闻展示页的步骤详解
Apr 11 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
JS实现音乐导航特效
Jan 06 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 #Javascript
JS 自定义带默认值的函数
Jul 21 #Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 #Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 #Javascript
iframe 异步加载技术及性能分析
Jul 19 #Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 #Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 #Javascript
You might like
PHP include_path设置技巧分享
2011/07/03 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP基础学习之流程控制的实现分析
2013/04/28 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
JavaScript 学习笔记(七)字符串的连接
2009/12/31 Javascript
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
IE8中动态创建script标签onload无效的解决方法
2014/12/22 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
jQuery实现动态添加、删除按钮及input输入框的方法
2017/04/27 jQuery
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
koa源码中promise的解读
2018/11/13 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
NodeJs实现简易WEB上传下载服务器
2019/08/10 NodeJs
Vue+Element-U实现分页显示效果
2020/11/15 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
为什么需要版本控制
2016/10/28 面试题
领导干部廉政承诺书
2014/03/27 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
学校政风行风评议心得体会
2014/10/21 职场文书
2015年个人剖析材料范文
2014/12/29 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
海弦WR-800F
2022/04/05 无线电
微信告警的zabbix监控系统 监控整个NGINX集群
2022/04/18 Servers
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技