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 相关文章推荐
js判断浏览器类型的方法
Aug 07 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
jquery+html5制作超酷的圆盘时钟表
Apr 14 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
原生js开发的日历插件
Feb 04 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
vue实现简单的MVVM框架
Aug 05 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
微信小程序自定义顶部组件customHeader的示例代码
Jun 03 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
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
php生成0~1随机小数的方法(必看)
2017/04/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
JavaScript高级程序设计阅读笔记(五) ECMAScript中的运算符(一)
2012/02/27 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
JS实现加载和读取XML文件的方法详解
2017/04/24 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
Node.js中环境变量process.env的一些事详解
2017/10/26 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
Vue中的scoped实现原理及穿透方法
2018/05/15 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
js实现简单点赞操作
2020/03/17 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python 应用之Pycharm 新建模板默认添加编码格式-作者-时间等信息【推荐】
2019/06/17 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
英国时尚配饰、珠宝和服装网站:KJ Beckett
2020/01/23 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
祖国在我心中演讲稿500字
2014/05/04 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
敬老院义诊活动总结
2015/05/07 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Javascript使用integrity属性进行安全验证
2021/11/07 Javascript
详解MongoDB排序时内存大小限制与创建索引的注意事项
2022/05/06 MongoDB