Mootools 1.2 튜토리얼 슬라이딩 효과(Slide)_Mootools

기본 사용법
이전에 본 모든 클래스와 마찬가지로 이 클래스를 요소에 적용할 때 가장 먼저 해야 할 일은 새 Fx.Slide 인스턴스를 초기화하는 것입니다.
먼저 슬라이딩 요소에 대한 HTML 파일을 만들어 보겠습니다.
참조 코드:

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

슬라이딩하여 표시할 내용은 다음과 같습니다.

저희 CSS도 수정이 필요하지 않습니다.
참조 코드:

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

.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;

새로운 Fx.Slide를 만들고 요소 변수에 전달합니다.
참조 코드:

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

var SlideElement = $(' Slide_element');
var SlideVar = new Fx.Slide(slideElement, {
// Fx.Slide options
mode: 'vertical', // 기본값은 'vertical'(수직)입니다.
/ / Fx 옵션
전환: 'sine:in',
기간: 300,
// Fx 이벤트
onStart: function(){
$('start') .highlight(" #EBCC22");
}
});

Fx.Slide는 Fx의 확장이므로 Fx의 모든 옵션과 이벤트를 사용할 수 있습니다. .Slide에는 자신만의 옵션도 있습니다.
Fx.Slide 옵션
Fx.Slide에는 "모드"와 "래퍼"라는 두 가지 옵션만 있습니다. 솔직히 말해서 나는 "래퍼"를 사용하는 것을 본 적이 없지만(필요한 경우를 본 적이 없습니다) "모드"는 수평 또는 수직으로 슬라이드할지 여부를 결정합니다.
모드(mode)
모드는 "수직" 또는 "수평"의 두 가지 선택을 제공합니다. 수직은 위에서 아래로 표시되고, 수평은 왼쪽에서 오른쪽으로 표시됩니다. 여기에는 아래에서 위로 또는 오른쪽에서 왼쪽으로 옵션이 없습니다. 하지만 이러한 기능을 구현하기 위해 클래스 자체를 수정하는 것이 비교적 간단하다는 것을 알고 있습니다. 제 생각에는 이것이 여전히 표준 옵션이 되기를 바랍니다. 누군가 이 옵션을 허용하도록 이 클래스를 수정했다면 우리에게 연락해 주세요.
래퍼
기본적으로 Fx.Slide는 슬라이딩 요소 외부에 래퍼를 추가하고 "overflow" 속성 값을 "hidden"에 할당합니다. 래퍼를 사용하면 다른 요소를 이 요소의 래퍼로 설정할 수 있습니다. 위에서 말했듯이 이 기능이 어디에 사용되는지는 알 수 없으며 이에 대한 의견을 듣고 싶습니다. (이것을 이해할 수 있게 해준 mooforum.net의 Horseweapon에게 감사드립니다.)
Fx.Slide의 방법
Fx.Slide는 요소를 표시하거나 숨길 수 있는 다양한 방법도 제공합니다.
.slideIn()
이름에서 알 수 있듯이 이 메소드는 시작 시간을 트리거하고 요소를 표시합니다.
.slideOut()
요소를 숨겨진 상태로 슬라이드합니다.
.toggle()
이 메소드는 요소를 표시하거나 숨길 수 있으며 결과는 전적으로 요소의 현재 상태에 따라 달라집니다. 클릭 이벤트에 매우 유용합니다.
.hide()
요소를 숨기지만 슬라이딩 효과는 사용하지 않습니다.
.show()
요소를 표시하지만 슬라이딩 효과는 사용하지 않습니다.
방법을 통한 모드 옵션 재설정
위의 각 방법은 선택적 모드 매개변수를 허용하여 이전에 설정된 옵션을 재정의할 수 있습니다.
참조 코드:

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

slideVar.slideIn ('horizontal');

Fx.Slide 단축키
Fx.Slide 클래스는 요소에 슬라이딩 효과를 추가하는 몇 가지 매우 편리한 단축키도 제공합니다.
.set('slide');
새 클래스를 초기화하지 않고도 set 메소드를 통해 요소에 슬라이드 객체를 추가하여 새 슬라이드 인스턴스를 생성할 수 있습니다.
참조 코드:

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

slideElement.set ('슬라이드');

옵션 설정
단축키를 통해 옵션을 설정할 수도 있습니다.
참조 코드:

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

slideElement.set('slide', {duration: 1250})


.slide()
.set() 메서드를 사용하여 슬라이드를 설정한 후에는 .slide() 메서드를 사용하여 초기화할 수 있습니다.
참조 코드:

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

slideElement.slide('in ');

.slide 메소드는 다음 매개변수를 허용할 수 있습니다:
'in'
'out'
'toggle'
'show'
' hide'
각 매개변수는 위의 방법에 해당합니다.
코드 예시
위 내용은 기본적으로 기본적인 사용법을 모두 다루고 있습니다. 아래 예에서는 위에서 배운 내용의 대부분을 사용하여 몇 가지 다른 슬라이딩 요소를 표시하고 일부 div를 표시기로 제공하므로 이러한 이벤트를 명확하게 볼 수 있습니다.
먼저 HTML 파일을 생성합니다.
참조 코드:

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

시작

취소

A 열기 id=" closeA">close A

다음은 일부 내용입니다. A. onComplete가 실행되기 전에 지연이 발생합니다. 전환 효과를 사용하면 슬라이드 요소가 '탄력적'으로 중지될 때까지 onComplete가 실행되지 않습니다. 또한 앞뒤로 클릭하면 이전 호출이 '취소'되고 새 호출에 우선순위가 부여됩니다.

>B 열기
B 닫기

옵션으로 설정됩니다.

toggle C

다음은 일부 콘텐츠입니다. C

id=" openD">toggle D

여기에 몇 가지 내용이 있습니다. D. 제가 어떤 이벤트에도 얽매이지 않는지 확인하세요. .slide 단축키를 사용하면 됩니다.

toggle E

id=" SlideE" class="slide">여기에 내용이 있습니다 - E

다음은 CSS 파일입니다. 우리는 가능한 한 단순하게 유지합니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. .ind { 너비: 200px;

여백: 10px;

배경색: #87AEE1;
글꼴-바닥: 1px 단색 흰색; >.slide {
여백: 20px 0;
여백: 10px;
너비: 200px
배경색: #DAF7B4}
#slide_wrap {
: 30px;
배경색: #D47000;
}


마지막으로 Mootools JavaScript 코드:
참조 코드:



코드 복사

코드는 다음과 같습니다.

window.addEvent('domready', function() {
// 예시 A
var SlideElement = $('slideA');
var SlideVar = new Fx.Slide(slideElement , {
// Fx.Slide 옵션
mode: 'horizontal', // 기본값은 'vertical'
//wrapper: this.element, // 기본값은 this.element
// Fx 옵션
링크: '취소',
전환: 'elastic:out',
기간: 'long',
// Fx 이벤트
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22")
},
onComplete: function(){
$('complete').highlight("#EBCC22")
}
}).hide().show().hide () ; // .hide 및 .show 메소드는 이벤트를 트리거하지 않습니다.
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
})
// 예시 B
var SlideElementB = $( 'slideB');
var SlideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide 옵션
mode: 'vertical', // 기본값은 'vertical'입니다
// Fx 옵션
// 참고: 체인 효과를 사용하면 여러 번 클릭할 수 있습니다.
// 마우스가 떠날 때
// 각 클릭의 애니메이션이 순서대로 트리거될 수 있습니다
링크: '체인',
// Fx 이벤트
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22")
},
onComplete: function(){
$('complete').highlight("# EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB ').addEvent('click', function(){
slideVarB.slideOut();
})
// 예시 C
var SlideElementC = $(' SlideC')
var SlideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide options
mode: 'vertical', // 기본값은 'vertical'
//wrapper : this.element, // 기본값은 this.element입니다
// Fx 옵션
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx 이벤트
onStart: function(){
$('start').highlight("#EBCC22")
},
onCancel: function(){
$('cancel').highlight ("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22"); }
}).hide ();
$('openC').addEvent('click', function(){
slideVarC.toggle();
}); ('slideD').slide( 'hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
//예제 C
var SlideElementE = $('slideE')
var SlideWrap = $('slide_wrap')
var SlideVarE = new Fx.Slide( SlideElementE, {
// Fx.Slide 옵션
//mode: 'vertical', // 기본값은 'vertical'
wrapper: SlideWrap // 기본값은 this.element
}) .hide();
$( 'openE').addEvent('click', function(){
slideVarE.toggle();
})



자세히 알아보기…

Fx.Slide는 다기능이며 매우 유용한 플러그인입니다. 자세한 내용은

Fx.Slide 문서

, Fx.Morph 및 Fx 문서. 또한 Fx.Morph와 Fx 옵션 및 이벤트에 대한 자습서

도 꼭 읽어보세요.

최종 예제 코드 zip 파일 다운로드

시작하는 데 필요한 모든 것이 포함되어 있습니다.