/**
* @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 ?
