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工具 Event封装
Aug 21 Javascript
JSON 和 JavaScript eval使用说明
Jun 13 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
May 17 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
php 阴历-农历-转换类代码
2012/01/16 PHP
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
Yii实现Command任务处理的方法详解
2016/07/14 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
2016/01/15 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Vue表单实例代码
2016/09/05 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
2017/07/27 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
详解封装基础的angular4的request请求方法
2018/06/05 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
2018/09/11 Javascript
小程序实现多选框功能
2018/10/30 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
2019/02/14 jQuery
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
详解Python的Lambda函数与排序
2016/10/25 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python实现自动发送邮件功能
2021/03/02 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
pycharm实现在虚拟环境中引入别人的项目
2020/03/09 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
python 统计list中各个元素出现的次数的几种方法
2021/02/20 Python
利用python实现汉诺塔游戏
2021/03/01 Python
Chemist Warehouse官方海外旗舰店:澳洲第一连锁大药房
2017/08/25 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
求职自荐信格式
2013/12/04 职场文书
党员教师群众路线对照检查材料思想汇报
2014/09/29 职场文书
中学生学习保证书
2015/02/26 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书