支持回调函数

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

第三步执行完成:Demo中另一页面演示更多层调用。 插件说明: 调用方式
$.multiSteps; 支持回调函数,支持启动函数 可以设置的参数列表: 复制代码 代码如下: { // Global defaults showOn:
‘click’, // ‘click’ or ‘mouseOn’ showAnim: ‘leftRight’, //
暂时定义等待扩展,未使用 slidefor: ‘next’, showSpeed: 1000,
//滑动速度,越小越快 beforeSlide: null, //进行滑动之前执行的函数
callback: null //callback }; 调用方式你可以单独对每个按钮调用: 复制代码 代码如下:
$.multiSteps({beforeSlide:_beforeSlide,callback:_callback});
$.multiSteps; $.multiSteps{alert;
也可以用这种方式调用:$(“.classs:not.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 *
插件原型:支持回调函数。 首页的注册功能,她的功能
插件参考了ui中日历的编写思路
因时间仓促,插件的上一步操作,只进行了简单的可逆操作,
在宽度自适应的时候会存在问题:两步在页面放大之后会出现在视野中,需要注意。
解决: getSteps中增加返回值oldstep
然后在styleSteps中的left或right定位设置为一个不可见位置即可。
可等待下一版本修订或者自己修改,修改后请告知,谢谢! **/ { 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 . */ log: function
console.log.apply; }, /* Override the default settings for all
instances of the MultiSteps. @param settings object – the new settings
to use as defaults @return the manager object */ setDefaults: function
{ 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 */
_attachMultiSteps: function { //alert; var inlineSettings = null; for
(var attrName in this._defaults) { var attrValue = target.getAttribute;
if { inlineSettings = inlineSettings || {}; try {
inlineSettings[attrName] = eval; } catch { inlineSettings[attrName]
= attrValue; } } } //var nodeName = target.nodeName.toLowerCase(); //var
inline = (nodeName == ‘div’ || nodeName == ‘span’); if { this.uuid += 1;
target.id = ‘ms’ + this.uuid; } var inst = this._newInst; inst.settings
= $.extend({}, settings || {}, inlineSettings || {});
this._connectMultiSteps; }, /* Attach the date picker to an input
field. */ _支持回调函数。connectMultiSteps: function { var target = $; inst.append =
$; inst.trigger = $; if (target.hasClass) return; this._attachments;
target.addClass; $.data(target, PROP_NAME, inst); }, /* Make
attachments based on settings. */ _attachments: function { //alert; if
inst.trigger.remove(); var showOn = this._get; var
currentStep=$.parents.index()+1; if
this._styleSteps(target,false,currentStep);
//this._forward(target,showSpeed,step); if { target.mouseover{
$.multiSteps._showMultiSteps; } if { inst.trigger=target.click {
$.multiSteps._showMultiSteps; return false; }); } }, _showMultiSteps:
function { var inst = $.multiSteps._getInst; var showSpeed =
this._get; var beforeSlide = this._get; var slidefor = this._get; var
step = $.parents.index() var stepSize =$.size();
//extendRemove(inst.settings, (beforeSlide ? beforeSlide.apply;
if((beforeSlide ? beforeSlide.apply{ if{ var step = step+1+1;
$.multiSteps._currentStep++; if this._forward(target,showSpeed,step);
} if{ //alert $.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; //alert; this._currentStep = step
pos = this._getPositions(); var steps = this._getSteps; var slidefor
if slidefor = $.multiSteps._get; if { $.css( { left: pos.left + ‘px’,
opacity: 0.3 }); $.css( { left: pos.center + ‘px’, opacity: 1 }); $.css(
{ left: pos.right + ‘px’, opacity: 0.3 }); } else { $.animate( { left:
pos.left + ‘px’, opacity: 0.3 }, animSpeed ); $.animate( { left:
pos.center + ‘px’, opacity: 1 }, //{ duration: animSpeed,
complete:$.multiSteps._callback(steps.curr,target,step)}//, { duration:
animSpeed, //specialEasing: ”, complete:function;
if(!$.multiSteps.resizing){ if{ var callback = $.multiSteps._get;
extendRemove(inst.settings, (callback ? callback.apply; } }
$.multiSteps.resizing=false; } } ); // //alert; //if $.css( { left:
pos.right + ‘px’, opacity: 0.3 }); /* else if{ alert; alert; alert;
$.animate( { left: pos.right + ‘px’, opacity: 0.3 },animSpeed); }*/ }
}, _getSteps: function { var currentStep=step; var stepSize =$.size();
var curr_step = ‘step_’+ currentStep; var prev_step = ( currentStep
== 1&& currentStep< ? null : ‘step_’+ ; var next_step = (
currentStep == stepSize ) ? null : ‘step_’+ ; return {curr: curr_step,
prev: prev_step, next: next_step }; }, _getPositions: function() {
var offset = this._offset; var step_width = $.width() / 2; //var
window_width = $; var window_width = $.width(); //alert 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 + ; return { offLeft: offLeft, left: leftPos,
center: centerPos, right: rightPos, offRight: offRight }; },
_pageRedraw: function() { //$.multiSteps.resizing = false;
//alert($.multiSteps._currentStep); //alert;
$.multiSteps._styleSteps(this,300,$.multiSteps._currentStep); }, /*
Create a new instance object. */ _newInst: function { var id =
target[0].id.replace/g, ‘\\\\$1’); // escape jQuery meta chars
return { id: id, obj: target }; }, /* Get a setting value, defaulting
if necessary. */ _get: function { 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 { try { return $.data; } catch { throw ‘Missing
instance data’; } } }); $.resize { $.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 { $.extend; for {
//alert; if (props[name] == null || props[name] == undefined)
target[name] = props[name]; } return target; }; /* Determine
whether an object is an array. */ function isArray { return (a &&
(($.browser.safari && typeof a == ‘object’ && a.length) ||
(a.constructor && a.constructor.toString))); }; $.fn.multiSteps =
function{ /* Verify an empty collection wasn’t passed – Fixes #6976
*/ if { return this; } /* var otherArgs = Array.prototype.slice.call;
//arguments函数对象是该对象代表正在执行的函数和调用它的函数的参数
//如果传入的是参数设置,则将这些内容拷贝到otherArgs数*/ return
this.each { $.multiSteps._attachMultiSteps; }; $.multiSteps = new
MultiSteps(); // singleton instance $.multiSteps.resizing = false;
$.multiSteps.resizeTimer = null; $.multiSteps.uuid = new Date

回调函数没有返回值,事实上,执行回调函数的时候已经脱离插件,你在这里可以做任何你想做的事!

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

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图