multiSteps Jquery_jquery 기반의 다단계 슬라이딩 전환 플러그인

그림: Html5를 지원하는 브라우저에서 보는 것이 더 좋습니다
그중 IE9 이하 버전에서는 필터를 사용하여 그림자를 시뮬레이션합니다. 여기에서 콘텐츠를 삭제하면 IE에서 작업이 더 원활해집니다(적어도 내 이전 컴퓨터는 실행됩니다). )
첫 번째 단계 그림:
시작 함수는 값을 반환해야 합니다. 이 시작 함수에서는 원하는 모든 작업을 수행할 수 있지만 잘못된 작업을 수행한 후에는 값을 반환해야 합니다.
Stop하고 처리 결과를 기다려야 하며, false를 반환하고 실행을 계속할 수 없습니다.
을 찾을 수 없으면 빨리 여기서 나가서 true를 반환하고 다음 단계로 진행하세요!

두 번째 단계 그림: 나타나는 프롬프트는 첫 번째 단계가 실행된 후 콜백 함수입니다

콜백 함수에는 반환값이 없습니다. 실제로 콜백 함수가 실행되면 플러그인과 분리됩니다. 여기에서 원하는 대로 수행할 수 있습니다.

세 번째 단계가 완료되었습니다.

데모의 다른 페이지에서는 더 많은 레이어 호출을 보여줍니다.
플러그인 설명:
$('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("두 번째 단계 실행 완료")}})

는 다음과 같은 방식으로 호출할 수도 있습니다: $(".classs:not(.lastStep) ").multiSteps( ; 이 문제)
페이지를 확대하면 현재 단계 이전(및 이후) ​​두 단계가 시야에 나타나므로 주의가 필요합니다.

해결책:

_getSteps에서 반환 값 oldstep을 늘립니다(현재 단계 전(또는 후) 두 단계) 그런 다음 _styleSteps에서 왼쪽 또는 오른쪽 위치를 보이지 않는 위치로 설정합니다. 위치.
다음 개정판이 나올 때까지 기다리시거나 직접 수정하시면 됩니다. 수정 후 알려주시면 감사하겠습니다.
전체 데모 데모 다운로드

전체 플러그인 코드 및 일부 댓글:

코드 복사 코드는 다음과 같습니다.

/** * @Version: 1.0.0
* @date: 2011-07-20
* @Email: Ethan.zhu83@gmail.com
* @QQ: 12377166
* @이름: multiSteps (다단계 슬라이딩 전환)
*
플러그인 프로토타입: http://www.groupon.com/ 홈페이지 등록 기능, 그녀 기능(최대 3개 지원) 단계, 다양성 없음)
플러그인은 UI에서 달력의 작성 아이디어를 말합니다
시간이 촉박하여 플러그인의 이전 단계에서는 간단한 되돌릴 수 있는 작업만 수행했습니다. .
너비가 적응형인 경우 문제가 발생합니다. (이 문제는 이전 단계에 존재합니다.)
페이지를 확대한 후 현재 단계 이전(및 이후) ​​두 단계가 시야에 나타납니다. , 그러니 주의가 필요합니다.
해결책:
getSteps에 반환 값 oldstep을 추가합니다(현재 단계 앞(또는 뒤) 두 단계)
그런 다음 styleSteps의 왼쪽 또는 오른쪽 위치를 보이지 않는 위치로 설정합니다.
다음 개정판을 기다리거나 직접 수정해도 됩니다. 수정 후 알려주세요. 감사합니다!
**/
(function($,undefine){
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 = [] // 추가할 수 있습니다. options here 구성 정보
this._defaults = { // 전역 기본값
showOn: 'click', // 'focus' 또는 'mouseOn'
showAnim: 'leftRight', // 임시로 정의되어 있습니다. 확장, 사용되지 않음
slidefor: 'next',
showSpeed: 1000, //슬라이딩 속도, 작을수록 빠름
beforeSlide: null, //슬라이딩 전에 실행되는 함수
콜백: null / /callback
};
$.extend(this._defaults, this.regional[''])
}
$.extend(MultiSteps.prototype, {
markerClassName: ' hasMultiSteps',
/* 디버그 로깅(활성화된 경우) */
log: function () {
if (this.debug)
console.log.apply('', 인수);
},
/* MultiSteps의 모든 인스턴스에 대한 기본 설정을 재정의합니다.
@param 설정 개체 - 기본값으로 사용할 새 설정(익명 개체)
@관리자 개체 반환 */
setDefaults: function(settings) {
extendRemove(this._defaults, settings || {});
return this;
},
/* 날짜 선택기를 jQuery 선택 항목에 연결 .
@param 대상 요소 - 대상 입력 필드 또는 구분 또는 범위
@param 설정 개체 - 이 날짜 선택기 인스턴스에 사용할 새 설정(익명) */
_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) ;
},
/* 날짜 선택기를 입력 필드에 연결합니다. */
_connectMultiSteps: function(target, inst) {
var target = $(target); >inst.append = $([]);
inst.trigger = $([]);
if (target.hasClass(this.markerClassName))
this._attachments( target, inst );
target.addClass(this.markerClassName);
$.data(target, PROP_NAME, inst);
},
/* 설정에 따라 첨부합니다. 🎜>_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(){
$.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 단계 = 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( { 왼쪽: pos.left 'px', 불투명도: 0.3 })
$( '. ' steps.curr ).css ( { 왼쪽: pos.center 'px', 불투명도: 1 })
$( '.' steps.next ).css( { 왼쪽: pos.right 'px', 불투명도 : 0.3 });
} else {
$( '.' steps.prev ).animate( { 왼쪽: pos.left 'px', 불투명도: 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)