Illustration: Viewing in support of HTML5 browsers can be more experienced
The following version of IE9 uses a filter to simulate a shadow, delete this content, ie run more smoothly (at least my old machine runs smoother.) ）
Illustration of the first step:
The start function needs to return a value, in which you can do whatever you want, but after you have done something bad you must return a value,
Is discovered, then you have to stop to wait for the result to be returned, then return false and cannot continue.
Without being found, get out of here. return true and continue to the next step!
Step two illustration: The prompt that jumps out is the callback function after the first step completes
The callback function has no return value, in fact, the callback function has been disconnected from the plugin, you can do anything you want to do here!
The third step completes:
Another page in the demo demonstrates more layer calls.
Plug-in Description:
Call mode $ (' obj '). Multisteps ({options});
Support for callback functions, support for startup functions (before starting sliding)
List of parameters you can set:
Copy Code code as follows:
{//Global defaults
Showon: ' Click ',//' click ' or ' Mouseon '
Showanim: ' LeftRight ',//temporarily define wait for extension, not used
Slidefor: ' Next ',
showspeed:1000,//sliding speed, smaller and faster
Beforeslide:null,//function to perform before sliding
Callback:null//callback
};
Call the way you can call each button individually:
Copy Code code as follows:
$ ("#step_one"). Multisteps ({beforeslide:_beforeslide,callback:_callback});
$ (". Prevstep"). Multisteps ({slidefor: ' prev '});
$ ("#step_two"). Multisteps ({callback:function () {alert ("Step Two Completes")});
It can also be invoked in this way: $ (". Classs:not (. laststep)"). Multisteps ();
Known plug-in bugs:
Due to the haste of time, the previous operation of the plug-in, only a simple reversible operation,
There is a problem when the width is adaptive: (This problem exists in the previous operation)
The front (and back) two steps of the current step appear in the field of view after the page is enlarged, requiring attention.
Workaround:
Add return value Oldstep in _getsteps (front (back) two steps of current step)
Then the left or right position in the _stylesteps is set to an invisible position.
Can wait for me to release the next version of the revision or changes, please let me know after the amendment, thank you
Full Demo Demo Download
Full plug-in code and partial comments:
Copy Code code as follows:
/** * @Version: 1.0.0
* @date: 2011-07-20
* @Email: Ethan.zhu83@gmail.com
* @QQ: 12377166
* @Name: Multisteps (multi-step sliding switch)
*
Plug-in prototype: http://www.groupon.com/Home registration function, her function (up to 3 steps, not universal)
Plug-ins refer to the idea of writing calendars in the UI
Due to the haste of time, the previous operation of the plug-in, only a simple reversible operation,
There is a problem when the width is adaptive: (This problem exists in the previous operation)
The front (and back) two steps of the current step appear in the field of view after the page is enlarged, requiring attention.
Solve:
Add return value Oldstep in Getsteps (front (back) two steps of current step)
Then the left or right position in the stylesteps is set to an invisible position.
You can wait for the next revision or modify it, please tell me, thank you!
**/
(function ($,undefined) {
var prop_name = ' multisteps ';
function Multisteps () {
This.debug = false; The change is to true to start debugging
This._position = '. Main-wrap '/sliding positioning object
This._formsteps = '. Form_step '//sliding Group of objects
This._currentstep = 1; Used to get the current display position when changing the window size
This._offset = 20; The size of the content display
This.regional = []; Additional configurable information can be added here
This._defaults = {//Global defaults
Showon: ' Click ',//' focus ' or ' Mouseon '
Showanim: ' LeftRight ',//temporarily define wait for extension, not used
Slidefor: ' Next ',
showspeed:1000,//sliding speed, smaller and faster
Beforeslide:null,//function to perform 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 a 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 are 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);
The arguments function object is the parameter that represents the function being executed and the function that called it.
If the parameter setting is passed in, copy the content to the Otherargs number * *
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)
