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 相关文章推荐
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
js实现表单多按钮提交action的处理方法
Oct 24 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
Vue.js组件tree实现无限级树形菜单
Dec 02 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
jquery实现广告上下滚动效果
Mar 04 jQuery
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里得到前天和昨天的日期的代码
2007/08/16 PHP
php/js获取客户端mac地址的实现代码
2013/07/08 PHP
PHP利用REFERER根居访问来地址进行页面跳转
2013/09/28 PHP
Laravel 4 初级教程之安装及入门
2014/10/30 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
同步文本框内容JS代码实现
2016/08/04 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
2016/12/09 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
微信小程序自定义底部弹出框
2020/11/16 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python实现的udp协议Server和Client代码实例
2014/06/04 Python
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
python 输出所有大小写字母的方法
2019/01/02 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
python实现图片上添加图片
2019/11/26 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
银行见习期自我鉴定
2014/01/29 职场文书
大学四年个人的自我评价
2014/02/26 职场文书
文艺晚会主持词
2014/03/24 职场文书
高考标语大全
2014/06/05 职场文书
雷人标语集锦
2014/06/19 职场文书
银行求职自荐信范文
2015/03/04 职场文书
求职自我评价范文
2015/03/09 职场文书
MySQL数据库配置信息查看与修改方法详解
2022/06/25 MySQL
CSS的calc函数用法小结
2022/06/25 HTML / CSS