multiSteps Jquery_jquery に基づくマルチステップ スライディング スイッチング プラグイン

図: Html5 をサポートするブラウザで表示すると、より良いエクスペリエンスが得られます
このうち、IE9 より前のバージョンでは、影をシミュレートするためにフィルターが使用されます。ここでコンテンツを削除すると、IE での操作がよりスムーズになります (少なくとも私の古いマシンでは動作します)。スムーズ) )
最初のステップの図:
スタートアップ関数では値を返す必要がありますが、このスタートアップ関数では何をしても構いませんが、悪いことをした後は値を返す必要があります。
停止して処理結果を待つ必要があり、その後 false を返して実行を続行できません。
が見つからない場合は、すぐにここを終了し、true を返して次のステップに進みます。

2 番目のステップの図: 最初のステップの実行後にポップアップ表示されるプロンプトはコールバック関数です

コールバック関数には戻り値がありません。実際、コールバック関数は実行時にプラグインから切り離されます。

3 番目のステップが完了しました:

デモの別のページでは、さらに多くのレイヤー呼び出しを示します。
プラグインの説明:
メソッド $('obj').multiSteps({options}); の呼び出し
コールバック関数とスタートアップ関数をサポート (スライド開始前)
設定できるパラメータのリスト:

コードをコピー コードは次のとおりです:

{ // グローバルデフォルト
showOn: 'click' , // 'click' または '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("2 番目のステップの実行が完了しました")}});


は次の方法でも呼び出すことができます: $(".classs:not(.lastStep) ").multiSteps( ; この問題)
ページを拡大すると、現在のステップの前後 2 つのステップが視野に表示されるので注意が必要です。

解決策:

_getSteps の戻り値 oldstep を増やします (現在のステップの 2 ステップ前 (または後))
次に、_styleSteps の左または右の位置を非表示に設定します。場所。
私が次のリビジョンをリリースするまでお待ちいただくか、ご自身で修正していただくことも可能です。修正後にお知らせください。ありがとうございます
完全なデモ デモのダウンロード
完全なプラグイン コードとコメント:


コードをコピー

コードは次のとおりです:

/** * @バージョン: 1.0.0
* @日付: 2011-07-20
* @メール: Ethan.zhu83@gmail.com
* @QQ: 12377166
* @Name: multiSteps (多段階スライド切り替え)
*
プラグインプロトタイプ: http://www.groupon.com/ ホームページへの登録機能、彼女の機能(最大3つまでサポート)
このプラグインは、UI でのカレンダーの記述アイデアを参照しています。
時間の都合上、プラグインの前のステップは単純な可逆操作のみを実行しました
幅が適応的である場合、問題が発生します: (この問題は前のステップに存在します)
ページがズームインされた後、現在のステップの前後 2 つのステップが視野に表示されます。 , なので注意が必要です。
解決策:
getSteps に戻り値 oldstep を追加します (現在のステップの 2 ステップ前 (または後))
次に、styleSteps の左または右の位置を非表示の位置に設定します。
次のリビジョンをお待ちいただくか、ご自身で変更していただくことも可能です。変更後はお知らせください。ありがとうございます。
**/
(function($,unknown){
var PROP_NAME = 'multiSteps';
function MultiSteps(){
this.debug = false; // これを true に変更しますデバッグを開始するには
this._position = '.main-wrap';//スライディング位置決めオブジェクト
this._formSteps = '.form_step';//スライディング オブジェクト グループ
this._currentStep = 1;ウィンドウサイズを変更するときに現在の表示位置を取得するために使用されます。
this._offset = 20; // コンテンツ表示の左右のサイズを描画します。
this.regional = [];オプションはここにあります 設定情報
this._defaults = { // グローバルデフォルト
showOn: 'click', // 'focus' または 'mouseOn'
showAnim: 'leftRight', // 待機するように一時的に定義されています拡張、使用されません
slidefor: 'next',
showSpeed: 1000, // スライド速度、小さいほど速くなります
beforeSlide: null, // スライド前に実行される関数
callback: null / /callback
};
$.extend(this._defaults, this.regional['']);
$.extend(MultiSteps.prototype, {
マーカークラス名: ' hasMultiSteps',
/* デバッグ ログ (有効な場合)。 */
log: function () {
if (this.debug)
console.log.apply('', argument);
},
/* MultiSteps のすべてのインスタンスのデフォルト設定をオーバーライドします。
@param 設定オブジェクト - デフォルトとして使用する新しい設定 (匿名オブジェクト)
@return マネージャー オブジェクト */
setDefaults: function(settings) {
extendRemove(this._defaults, settings || {});
return this;
},
/* 日付ピッカーを jQuery 選択にアタッチします.
@param target 要素 - ターゲットの入力フィールド、ディビジョン、またはスパン
@param settings オブジェクト - この日付ピッカー インスタンスに使用する新しい設定 (匿名) */
_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 || {};
inlineSettings[attrName] =
} catch (err); >inlineSettings[ attrName] = attrValue;
}
}
}
//var nodeName = target.nodeName.toLowerCase()
//var inline = (nodeName == 'div) ' || ノード名 == 'span');
if (!target.id) {
this.uuid = 'ms' this.uuid; 🎜>var inst = this._newInst($(target));
inst.settings = $.extend({}, settings || {}, inlineSettings || {});
this._connectMultiSteps(target) ,inst) ;
},
/* 日付ピッカーを入力フィールドにアタッチします。 */
_connectMultiSteps: function(target, inst) {
var target = inst.append = $([]);
inst.trigger = $([]);
if (target.hasClass(this.markerClassName))
this._attachments( target, inst );
target.addClass(this.markerClassName);
},
/* 設定に基づいて添付ファイルを作成します。 🎜>_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 (inst, 'showSpeed');
var beforeSlide = this._get(inst, 'beforeSlide'); (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;
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 ステップ = this._getSteps(target,step);
var slidefor
if(inst!=null)
slidefor = $.multiSteps._get(inst,'slidefor') ;
if ( !animSpeed ) {
$( '.' ステップ.prev ).css( { left: pos.left 'px', 不透明度: 0.3 }); 'steps.curr ).css ( { left: pos.center 'px', opacity: 1 });
$( '.'steps.next ).css( { left: pos.right 'px', opacity : 0.3 });
} else {
$( '.' ステップ.prev ).animate( { left: pos.left 'px', 不透明度: 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)