multiSteps multi-step sliding switching plug-in based on Jquery_jquery

Illustration: Viewing in a browser that supports Html5 will have a better experience
Among them, versions below IE9 use a filter to simulate a shadow. Delete the content here and the operation will be smoother under IE (at least my old machine runs smoother) . )
Illustration of the first step:
The startup function needs to return a value. You can do whatever you want in this startup function, but you must return a value after you have done the bad thing.
You have to Stop and wait for the processing result, then return false and cannot continue execution. If
is not found, leave here quickly, return true, and continue to the next step!

Illustration of the second step: The prompt that pops up is the callback function after the first step is executed

The callback function has no return value. In fact, when the callback function is executed, it is separated from the plug-in. You can do whatever you want here!

The third step is completed:

Another page in the Demo demonstrates more layer calls.
Plug-in description:
Calling method $('obj').multiSteps({options});
Supports callback function and startup function (before starting sliding)
Parameter list that can be set:

Copy code The code is as follows:

　　{ // Global defaults
showOn: 'click' , // 'click' or 'mouseOn'
showAnim: 'leftRight', // Temporarily defined to wait for expansion, not used
slidefor: 'next',
showSpeed: 1000, //Sliding speed, the longer Smaller and faster
beforeSlide: null, //Function executed before sliding
callback: null //callback
};

You can call each button individually Call:

Copy code The code is as follows:

$("#step_one").multiSteps( {beforeSlide:_beforeSlide,callback:_callback});
$(".prevStep").multiSteps({slidefor:'prev'});
$("#step_two").multiSteps({callback:function (){alert("Second step execution completed")}});

can also be called in this way: $(".classs:not(.lastStep)").multiSteps( ; This problem)
The two steps before (and after) the current step will appear in the field of view after the page is zoomed in, so you need to pay attention.

Solution:

Increase the return value oldstep in _getSteps (two steps before (or after) the current step) Then set the left or right positioning in _styleSteps to an invisible one Just the location.
You can wait for me to release the next revision or modify it yourself. Please let me know after the modification, thank you
Full demo Demo download

Full plug-in code and some comments:

Copy code The code is as follows:

/** * @Version: 1.0.0
* @date: 2011-07-20
* @Email: Ethan.zhu83@gmail.com
* @QQ: 12377166
* @Name: multiSteps (multi-step sliding switching)
*
Plug-in prototype: http://www.groupon.com/ Registration function on the homepage, her function (supports up to 3 steps, does not have Versatility)
The plug-in refers to the writing idea of ​​the calendar in UI
Due to the rush of time, the previous step of the plug-in only performed a simple reversible operation.
There will be problems when the width is adaptive: ( This problem exists in the previous step)
The two steps before (and after) the current step will appear in the field of view after the page is zoomed in, so you need to pay attention.
Solution:
Add the return value oldstep in getSteps (two steps before (or after) the current step)
Then set the left or right positioning in styleSteps to an invisible position.
You can wait for the next revision or modify it yourself. Please let us know after modification, thank you!
**/
(function($,undefined){
var PROP_NAME = 'multiSteps';
function MultiSteps(){
this.debug = false; // Change this to true to start debugging
this._position = '.main-wrap';//Sliding positioning object
this._formSteps = '.form_step';//Sliding object group
this._currentStep = 1; // Used to obtain the current display position when changing the window size
this._offset = 20; // Draw out the size of the content display left and right
this.regional = []; // You can add additional options here Configuration information
this._defaults = { // Global defaults
showOn: 'click', // 'focus' or 'mouseOn'
showAnim: 'leftRight', // Temporarily defined to wait for expansion, not used
slidefor: 'next',
showSpeed: 1000, //Sliding speed, the smaller, the faster
beforeSlide: null, //Function executed before sliding
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 }, 애니메이션속도 );
$( '.' steps.curr ).animate( { 왼쪽: pos.center 'px', 불투명도: 1 },
//{ 지속 시간: animSpeed, 완료:$.multiSteps._callback(steps. curr,target,step)}//,
{ 기간: animSpeed,
//specialEasing: '',
complete:function(){
$(this).stop()
if(!$.multiSteps.resizing){
if(step>1){
var callback = $.multiSteps._get(inst, 'callback')
extendRemove(inst.settings, (콜백 ? callback.apply() : {}));
}
}
$.multiSteps.resizing=false;
}
);
//
//alert(slidefor);
//if(slidefor=='next')
$( '.' steps.next ).css( { 왼쪽: pos.right 'px', 불투명도: 0.3 });
/* else if(slidefor=='prev'){
alert(pos.right);
경고(steps.next);
경고(steps.curr);
$( '.' steps.next ).animate( { 왼쪽: pos.right 'px', 불투명도: 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_'(현재단계-1);
var next_step = ( currentStep == stepSize ) ? null : 'step_'(현재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 = 오프셋 - step_width;
var centerPos = window_width / 2;
var rightPos = window_width - 오프셋 step_width;
var offRight = rightPos ( 3 * step_width );
return { offLeft: offLeft, 왼쪽: leftPos, center: centerPos, right: rightPos, offRight: offRight };
},
_pageRedraw: function() {
//$.multiSteps.resizing = false;
//alert($.multiSteps._currentStep);
//alert(현재단계);
$.multiSteps._styleSteps(this,300,$.multiSteps._currentStep);
},
/* 새 인스턴스 개체를 만듭니다. */
_newInst: function(target) {
var id = target[0].id.replace(/([^A-Za-z0-9_-])/g, '\\$1') ; // jQuery 메타 문자를 이스케이프합니다
return {
id: id,
obj: target
};
},
/* 설정 값을 가져오고 필요한 경우 기본값을 사용합니다. */
_get: function(inst, name) {
return inst.settings[name] !== undefine ?
inst.settings[이름] : this._defaults[이름];
},
/* 대상 컨트롤에 대한 인스턴스 데이터를 검색합니다.
@return 객체 - 연관된 인스턴스 데이터
데이터 가져오기에 jQuery 문제가 있는 경우 @throws 오류 */
_getInst: function(target) {
try {
return $.data(target, PROP_NAME);
}
catch(err) {
throw '인스턴스 데이터 누락';
}
}
});
$( window ).resize( function() {
$.multiSteps.resizing = true;
//alert($.multiSteps.resizing);
if ( $.multiSteps.resizeTimer ! = null || $.multiSteps.resizeTimer =="정의되지 않음" ) {
window.clearTimeout( $.multiSteps.resizeTimer )
}
$.multiSteps.resizeTimer = window.setTimeout( $.multiSteps ._pageRedraw, 300 )
});
/* jQuery 확장은 이제 null을 무시합니다! */
function extendRemove(target, props) {
$.extend(target, props);
for(props의 변수 이름){
//alert(name);
if (props[이름] == null || props[이름] == 정의되지 않음)
target[이름] = props[이름];
}
반환 대상;
};
/* 객체가 배열인지 확인합니다. */
function isArray(a) {
return (a && (($.browser.safari && typeof a == 'object' && a.length) ||
(a.constructor && a. constructor.toString().match(/Array()/))));
};
$.fn.multiSteps = function(options){
/* 빈 컬렉션이 전달되지 않았는지 확인 - 수정 #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 = 새로운 MultiSteps(); // 싱글턴 인스턴스
$.multiSteps.resizing = false;
$.multiSteps.resizeTimer = null;
$.multiSteps.uuid = new Date().getTime();
})(jQuery)