Mootools 1.2 튜토리얼 스크롤바(슬라이더)_Mootools

WBOY

풀어 주다： 2016-05-16 18:46:36

원래의

1059명이 탐색했습니다.

슬라이더는 이와 같은 친숙한 패턴을 따르지만 여전히 뭔가 특별한 점이 있습니다.
기본 사용법
새 스크롤 막대(Slider) 개체 만들기
먼저 HTML과 CSS부터 시작합니다. 기본 아이디어는 스크롤 막대에 대한 div를 생성하여 긴 직사각형(길이는 스크롤 막대로 수행하는 작업에 따라 다름)과 슬라이더로 하위 요소를 생성하는 것입니다.
참조 코드:

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

CSS도 그렇게 간단할 수 있습니다. 너비, 높이, 배경색만 설정하면 됩니다.
참조 코드:

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

 
#slider { 
 너비: 200px 
높이: 20px 
배경 색상: #0099FF 
} 
#knob { 
너비: 20px 
높이: 20px 
배경 색상: #993333 
} 

이제 새로운 스크롤바 객체를 생성할 수 있습니다. 스크롤 막대를 초기화하려면 먼저 관련 요소를 일부 변수에 할당한 다음 "new"를 사용하여 이전에 tween, morph 및 drag.move를 만들었을 때와 마찬가지로 스크롤 막대 Slider 개체를 만듭니다.
참조 코드:

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

// 변수에 요소 할당
var SliderObject = $ ('slider');
var nodeObject = $('knob');
// 새 슬라이더 객체 생성
// 먼저 슬라이더 요소를 정의합니다
// 슬라이더 요소
var SliderObject = new Slider(sliderObject, 손잡이Object, {
// 옵션은 다음과 같습니다.
// 이러한 옵션에 대해서는 나중에 자세히 설명하겠습니다.
범위: [0, 10],
snap: true,
steps: 10,
offset: 0,
wheel: true,
mode: 'horizontal',
// onchange 이벤트는 단계 변경 값
// 현재 단계를 매개변수로 전달합니다
onChange: function(step){
// onchange가 배치될 때 실행될 코드를 여기에 배치합니다
//
} 단계를 인용할 수 있음,
// 사용자가 슬라이더를 드래그하면 ontick 이벤트가 트리거됩니다.
// 현재 위치(상위 요소의 위치를 기준으로)를 전달합니다.
onTick: function(pos){
// 슬라이더의 위치를 조정하기 위해 필요합니다
// 자세한 내용은 아래에서 설명하겠습니다
this.knob.setStyle('left', pos); >},
// 드래그가 중지되면 트리거됨
onComplete: function(step){
// 완료 시 실행될 코드
//
단계를 참조할 수 있습니다.}
});

슬라이더 옵션
스냅: (기본값은 false), true 또는 false 값일 수 있습니다. 이는 슬라이더가 최소 셀에서 이동할지 여부를 결정합니다.
오프셋: (기본값은 0), 시작을 기준으로 한 슬라이더의 위치입니다. 이에 대한 실험을 할 수 있습니다.
범위: (기본값은 false) 매우 유용한 옵션입니다. 숫자 범위를 설정할 수 있으며 이 숫자와 단계 번호를 기반으로 onchange 이벤트가 트리거됩니다. 예를 들어, 설정한 범위가 [0, 200]이고 설정한 단계 값이 10인 경우 각 onchange의 단계 값은 20이 됩니다. 이 범위는 [-10,0]과 같은 음수이기도 합니다. 이 숫자는 역방향 스크롤 막대를 만들 때 매우 유용합니다(아래 예).
휠: (기본값은 false), 이 매개변수가 true로 설정되면 이 스크롤 막대는 마우스 휠 이벤트를 인식합니다. 마우스 휠을 사용할 때 마우스 휠 이벤트의 동작이 반전되지 않도록 범위 매개변수를 조정해야 할 수도 있습니다(예제는 다음과 같습니다).
단계: (기본값은 100), 기본값인 100은 쉽게 백분율로 사용할 수 있으므로 매우 유용합니다. 물론 원하는 만큼 많은 단계를 설정할 수 있습니다(괜찮습니다).
모드: (기본값은 "horizontal"), 이 매개변수는 스크롤 막대가 가로 또는 세로로 스크롤되는지 여부를 정의합니다. 물론 가로 스크롤에서 세로 스크롤로 변환하려면 몇 가지 추가 단계가 필요합니다.
콜백 이벤트
onChange: 이 이벤트는 단계가 변경될 때 트리거됩니다. 또한 "step" 매개변수를 전달합니다. 아래 예에서 트리거되는 시기를 확인할 수 있습니다.
onTick: 이 이벤트는 제어점의 위치가 변경될 때 트리거됩니다. 또한 "position" 매개변수를 전달합니다. 아래 예에서 트리거되는 시기를 확인할 수 있습니다.
onComplete: 이 이벤트는 제어 지점이 해제될 때 트리거됩니다. 매개변수 "단계"를 전달하는 찌르기. 아래 예에서 트리거되는 시기를 확인할 수 있습니다.
코드 예시
실제로 작동하는 모습을 보기 위해 예시를 만들어 보겠습니다.
.set(); 메서드: .set() 메서드를 사용하는 방법을 보려면 버튼의 이벤트를 살펴보세요. 사용 방법은 매우 간단합니다. 슬라이더 개체를 호출하고 .set를 추가한 다음 스크롤하려는 단계 수를 추가합니다.
참조 코드:

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