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 判断是否存在函数的方法
Jan 03 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
js多个物体运动功能实例分析
Dec 20 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
Vue shopCart 组件开发详解
Jan 26 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
jQuery pagination分页示例详解
Oct 23 jQuery
Nest.js散列与加密实例详解
Feb 24 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数组
2006/10/09 PHP
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
用PHP实现图象锐化代码
2007/06/14 PHP
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
vue中的面包屑导航组件实例代码
2019/07/01 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
Python装饰器知识点补充
2018/05/28 Python
python计算列表内各元素的个数实例
2018/06/29 Python
Python3中exp()函数用法分析
2019/02/19 Python
公司营业员的工作总结自我评价
2013/10/05 职场文书
总经理秘书工作职责
2013/12/26 职场文书
开会迟到检讨书
2014/01/08 职场文书
“学雷锋活动月”总结
2014/03/09 职场文书
生物科学专业自荐书
2014/06/20 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
付款证明模板
2015/06/19 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
分析SQL窗口函数之排名窗口函数
2022/04/21 Oracle