MultiSteps Jquery-based multi-step slide switching plug-in

Illustration: the Html5 browser is supported for better viewing experience
In IE9 or earlier versions, the filter is used to simulate a shadow. if the content is deleted, the operation in IE will be smoother (at least my old man will be smoother .)
Step 1 illustration:
To start a function, you need to return a value. In this function, you can do whatever you want, but you must return a value after you have done something bad,
If it is found, you have to stop and wait for the processing result. Then, false is returned and the execution cannot be continued,
If it is not found, leave here and return true. continue to the next step!

Step 2 illustration: the prompt displayed is the callback function after the execution of the first step.

The callback function has no return value. In fact, it is out of the plug-in when executing the callback function. You can do anything you want here!

Step 3:

Another page in the Demo shows more invocation layers.
Plugin description:
Call method $ ('obj '). multiSteps ({options });
Supports callback functions and start functions (before moving)
List of configurable parameters:

Copy codeCode: {// Global ults
ShowOn: 'click', // 'click' or 'mouseon'
ShowAnim: 'leftright ', // temporarily defines pending extension, not used
Slidefor: 'Next ',
ShowSpeed: 1000, // sliding speed, the smaller the faster
BeforeSlide: null, // function executed before sliding
Callback: null // callback
};

You can call each button separately:Copy codeThe Code is as follows: $ ("# step_one"). multiSteps ({beforeSlide: _ beforeSlide, callback: _ callback });
$ (". PrevStep"). multiSteps ({slidefor: 'prev '});
$ ("# Step_two"). multiSteps ({callback: function () {alert ("Step 2 completed ")}});

You can also call $ (". classs: not (. lastStep)"). multiSteps ();
Known plug-in bugs:
Due to the rush of time, the previous operation of the plug-in only performed a simple reversible operation,
There will be a problem in width Adaptation: (this problem exists in the previous operation)
The two steps before and after the current step appear in the field of view after the page is enlarged.
Solution:
_ Adding the return value oldstep in getSteps (two steps before (after) The current step)
Set left or right positioning in _ styleSteps to an invisible position.
You can wait for me to release the next version or modify it by myself. Please let me know after the modification. Thank you.
Complete Demo download
Complete plug-in code and some comments:Copy codeThe Code is as follows:/*** @ Version: 1.0.0
* @ Date: 2011-07-20
* @ Email: Ethan.zhu83@gmail.com
* @ QQ: 12377166.
* @ Name: multiSteps (multi-step slide switching)
*
Plug-in prototype: http://www.groupon.com/Home Page registration feature, her features (up to 3 steps supported, not universal)
The plug-in describes how to compile the calendar in the ui.
Due to the rush of time, the previous operation of the plug-in only performed a simple reversible operation,
There will be a problem in width Adaptation: (this problem exists in the previous operation)
The two steps before and after the current step appear in the field of view after the page is enlarged.
Solution:
Add the return value oldstep in getSteps (two steps before (after) The current step)
Set left or right positioning in styleSteps to an invisible position.
Please wait for the next version to be revised or modified by yourself. Please inform us after the modification. Thank you!
**/
(Function ($, undefined ){
Var PROP_NAME = 'multisteps ';
Function MultiSteps (){
This. debug = false; // Change this to true to start debugging
This. _ position = '. main-wrapp'; // The Moving position object.
This. _ formSteps = '. form_step'; // sliding object group
This. _ currentStep = 1; // used to obtain the current display position when the window size is changed
This. _ offset = 20; // you can specify the size of the content to be displayed.
This. regional = []; // you can add other configurable information here.
This. _ defaults = {// Global defaults
ShowOn: 'click', // 'focal 'or 'mouseon'
ShowAnim: 'leftright ', // temporarily defines pending extension, 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 placement .css ({left: pos. left + 'px ', opacity: 0.3 });
$ ('.' + Steps. curr detail .css ({left: pos. center + 'px ', opacity: 1 });
$ ('.' + Steps. next example .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 example .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 (){
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 );
// The arguments function object is the parameter that indicates the function being executed and the function that calls it.
// If the parameter settings are passed in, copy the content to the number of 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)