插图：在支持Html5浏览器下观看会有更加体验

其中IE9以下版本使用滤镜模拟了一个阴影，删掉此处内容，IE下运行会更加平滑（至少我的老爷机运行更平滑了。）

第一步插图：

启动函数需要返回值，在这个启动函数里面你可以为所欲为，但是在你坏事做完之后必须返回一个值，

被发现，那你就得停下来等待处理结果，那么就返回false，无法继续执行，

没有被发现那就赶紧的离开这里，返回true，继续执行到下一步！

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

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

第三步执行完成：

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)