Mootools 1.2 아코디언 튜토리얼_Mootools

기본 아코디언을 만들고 구성하는 것은 간단하지만 고급 옵션은 다소 복잡할 수 있으므로 전체 기사를 주의 깊게 읽어야 합니다.
기본
새 아코디언 만들기
새 아코디언을 만들려면 제목과 내용이 포함된 몇 가지 요소 쌍을 선택해야 합니다. 따라서 먼저 각 제목과 각 콘텐츠 블록에 CSS 클래스 이름을 할당해야 합니다.
참조 코드:

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

Toggle 1

토글 1 p>

토글 2

다음은 토글 2

🎜>

이제 CSS 클래스 이름이 "togglers"인 모든 요소와 CSS 클래스 이름이 "elements"인 모든 요소를 ​​선택하고 변수에 할당한 다음 아코디언 개체를 초기화합니다.
참조 코드:

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

var 전환 = $$( '.togglers');
var content = $$('.elements');
// 개체 변수 생성
// "new"를 사용하여 새 아코디언 개체 생성
/ / 스위치(toogle) 배열 설정
// 콘텐츠 배열 설정
var AccordionObject = new Accordion(toggles, content)

아코디언의 기본 설정은 이 효과는 다음과 같습니다.
Toggle 1
Toggle 1의 내용은 다음과 같습니다.
Toggle 2
Toggle 2의 내용은 다음과 같습니다.
Toggle 3
Toggle 3의 내용은 다음과 같습니다. 🎜>
옵션
물론 아코디언의 기본 효과가 아닌 다른 효과를 원한다면 옵션을 조정해야 합니다. 여기서는 하나씩 설명하겠습니다.
표시
기본값은 0
이 옵션은 페이지가 로드될 때 표시될 요소를 결정합니다. 기본값은 0이므로 첫 번째 요소가 표시됩니다. 다른 요소로 설정하고 싶다면 다른 요소의 인덱스 값(정수)으로 설정하면 됩니다. "표시"와 달리 "표시"는 그라데이션 애니메이션을 사용하여 요소를 확장합니다.
참조 코드:

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

var AccordionObject = new Accordion( 전환, 콘텐츠 {

display: 0 // 기본값은 0
})


show

기본값은 0
은 "display"와 매우 유사합니다. , "show" 페이지가 로드될 때 확장될 요소를 결정하지만 그라데이션 애니메이션은 없습니다. 페이지가 로드된 후에만 그라데이션 애니메이션을 사용하지 않고 표시됩니다.
참조 코드:

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

var AccordionObject = new Accordion( 전환, 콘텐츠 {

display: 0 // 기본값은 0
});


height

기본값은 true
true로 설정하면 콘텐츠가 높은 그라데이션 애니메이션 효과가 표시됩니다. 이것은 위에서 본 것과 동일한 표준 아코디언 설정입니다.
참조 코드:

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

var AccordionObject = new Accordion( 토글, 콘텐츠 {

height: true // 기본값은 true
})


width

기본값은 false
"height"와 유사하지만 높이 그라데이션 애니메이션을 사용하여 콘텐츠를 표시하는 대신 너비 그라데이션 애니메이션을 사용하여 콘텐츠를 표시합니다. 우리가 본 다른 표준 설정과 함께 "너비" 옵션을 사용하는 경우 개별 타이틀 스위치 사이의 거리는 콘텐츠 높이만을 기준으로 동일하게 유지됩니다. 콘텐츠 div는 콘텐츠를 표시하기 위해 왼쪽에서 오른쪽으로 점차 넓어집니다.
참조 코드:

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

var AccordionObject = new Accordion( 전환, 콘텐츠 {

width: false // 기본값은 false
})


opacity

기본값은 true
이 옵션은 숨기거나 show content , 불투명도 그라데이션 효과를 사용할지 여부입니다. 위의 기본 설정을 사용했기 때문에 효과를 볼 수 있습니다.
참조 코드:

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

var AccordionObject = new Accordion(toggles, content {
opacity: true // 기본값은 true
})

fixedHeight
기본값은 false
고정 높이를 설정하려면 여기에서 정수를 설정할 수 있습니다(예를 들어 100을 설정하면 콘텐츠 높이가 100px이 됩니다). 설정하려는 높이가 콘텐츠 높이보다 작은 경우 CSS에서 콘텐츠의 오버플로 속성을 설정해야 합니다. 예상할 수 있듯이 "show" 옵션을 사용하면 페이지가 처음 로드될 때 등록되지 않습니다.
참조 코드:

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

var AccordionObject = new Accordion( 토글, 콘텐츠 {
fixedHeight: false // 기본값은 false
})

fixedWidth
기본값은 false
위의 "fixedHeight"와 유사합니다. 이 옵션에는 너비를 설정하는 정수가 제공됩니다.
참조 코드:

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

var AccordionObject = new Accordion( 토글, 콘텐츠 {
fixedWidth: false // 기본값은 false
}); 제목으로 전환합니다. 이 옵션을 true로 설정하면 콘텐츠가 확장된 헤더를 클릭하면 콘텐츠 블록이 닫히지만 요소는 확장되지 않습니다. 아래 예시를 보면 바로 알 수 있습니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var AccordionObject = new Accordion( 전환, 콘텐츠 { alwaysHide: false // 기본값은 false })

Event
onActive
이 이벤트는 요소를 전환할 때 트리거됩니다. . 스위치 제어 요소와 콘텐츠 요소는 물론 스위치 상태도 매개변수로 전달합니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var AccordionObject = new Accordion( 토글, 콘텐츠 { onActive: function(toggler, element) { toggler.highlight('#76C83D'); // 녹색

element.highlight('#76C83D');

}
});


onBackground
이 이벤트는 ige 요소가 숨겨지기 시작할 때 트리거되며, 확장된 요소가 아닌 다른 모든 닫힌 요소를 매개변수로 전달합니다.
참조 코드:

코드 복사

코드는 다음과 같습니다. var AccordionObject = new Accordion( 토글, 콘텐츠 { onBackground: function(toggler, element) { toggler.highlight('#DC4F4D'); // 빨간색

element.highlight('#DC4F4D');

}
});


onComplete
이것은 표준 onComplete 이벤트입니다. 콘텐츠 요소가 포함된 변수가 전달됩니다. 이러한 것들을 얻을 수 있는 또 다른 더 좋은 방법이 있습니다. 아는 사람이 있으면 메모해 주세요.
참조 코드:

코드 복사

코드는 다음과 같습니다. var AccordionObject = new Accordion( 토글, 콘텐츠 { onComplete: function(one, two, three, four){ one.highlight('#5D80C8'); // 파란색

two.highlight('#5D80C8' );

three.highlight('#5D80C8');
four.highlight('#5D80C8')
}
});
메서드
.addSection();
이 메서드를 사용하면 중간에 섹션(제목/콘텐츠 요소 쌍)을 추가할 수 있습니다. 이는 우리가 본 다른 많은 방법과 동일합니다. 먼저 아코디언 객체를 참조한 다음 .addSection을 참조한 다음 제목의 ID와 콘텐츠의 ID를 호출하고 마지막으로 위치(이 새 요소가 나타날 위치)를 지정할 수 있습니다(0이 첫 번째입니다). 위치) .
참조 코드: [코드 복사] [코드 저장]
AccordionObject.addSection('togglersID', 'elementsID', 2)
참고: 이 방법으로 섹션을 추가하면 색인이 생성되지만 값 2가 표시되지만 실제 인덱스는 마지막 인덱스 값에 1을 더한 값이어야 합니다. 배열에 5개의 항목이 있고 6번째 항목을 추가하면 .addSection() 메서드를 통해 항목을 추가한 위치에 관계없이 해당 인덱스는 5가 됩니다.
.display();
이 메소드를 사용하면 지정된 요소를 확장할 수 있습니다. 인덱스로 요소를 선택합니다. 새 요소 쌍을 추가하고 이를 확장하려면 새 인덱스를 사용해야 합니다.
참조 코드:

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

AccordionObject.display (5) ; // 새로 추가된 요소가 표시됩니다.

예
여기에는 위에서 본 모든 이벤트와 메서드와 훨씬 더 많은 옵션을 사용하여 완전한 기능을 갖춘 아코디언이 있습니다. 아래 코드와 코드 내의 관련 주석을 주의 깊게 읽고 해당 주석이 어떻게 사용되는지 확인하세요.
참조 코드:

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

// 토글 요소와 콘텐츠 요소를 두 변수에 할당
varggles = $$('.togglers')
var content = $$('.elements'); >// 객체 변수 생성
// new를 사용하여 새 아코디언 객체 생성
// 스위치 배열 설정
// 콘텐츠 배열 설정
// 관련 옵션 및 이벤트 설정
var AccordionObject = new Accordion(toggles, content, {
// 페이지가 로드될 때
// 콘텐츠 요소(인덱스에 해당하는 요소)가 표시됩니다.
// 그라데이션 애니메이션 없이, 그냥 확장하세요
// 또한 참고: "fixedHeight"를 사용하는 경우
// 페이지가 처음 로드될 때 표시 옵션이 작동하지 않습니다
// "표시" 옵션이 "표시" 옵션보다 우선합니다
show: 0,
// 페이지가 로드될 때
// 콘텐츠 요소(인덱스에 해당하는 요소)가 표시(표시)됩니다.
// 콘텐츠가 확장되면 그라데이션 애니메이션
// 표시 옵션과 표시 옵션이 동시에 설정된 경우
// 표시 옵션이 표시 옵션보다 우선 적용됩니다.
// 표시: 0,
// 기본값은 true
// 이것은 수직 아코디언이 생성됩니다
height : true,
// 이것은 사용된 수평 아코디언 매개변수입니다
// CSS의 개입으로 인해 더 복잡해집니다
// 나중에 논의하겠습니다. 다시 논의하겠습니다.
width: false,
// 기본값은 true
// 콘텐츠에 불투명도 그라데이션 효과를 줍니다.
opacity: true,
// 기본값 false이거나 정수일 수 있습니다. -
// 모든 콘텐츠 블록의 높이가 고정됩니다
// CSS에서 오버플로 규칙을 설정해야 합니다
// "show"를 사용하면 페이지의 첫 번째 페이지가 처음 로드될 때 적용되지 않습니다.
fixedHeight: false,
// false 또는 정수일 수 있습니다
// 유사 위의 고정 높이,
// 그러나 이것은 수평 아코디언에 대한 설정입니다
fixedWidth: false,
// 확장된 항목을 토글할 수 있습니다
alwaysHide: true,
// 표준 onComplete 이벤트
// 각 콘텐츠 블록 요소에 대한 변수 전달
onComplete: function(one, two, three, four, five){
one.highlight('#5D80C8') // blue
two.highlight('#5D80C8');
three.highlight('#5D80C8')
four.highlight('#5D80C8')
five.highlight('#5D80C8') ; // 추가된 섹션입니다
$('complete ').highlight('#5D80C8')
},
// 이 이벤트는 요소를 전환할 때 발생합니다
/ / 열려 있는 스위치 요소
// 및 콘텐츠 요소
onActive: function(toggler, element) {
toggler.highlight('#76C83D') // Green
element.highlight를 전달합니다. ('#76C83D');
$('active ').highlight('#76C83D');
},
// 이 이벤트는 요소가 숨겨지기 시작할 때 발생합니다
/ / 모든 닫는 요소를 전달합니다
// 또는 확장되지 않은 요소
onBackground: function(toggler, element) {
toggler.highlight('#DC4F4D') // Red
element.highlight(' #DC4F4D');
$( '배경').highlight('#DC4F4D')
}
})
$('add_section').addEvent('클릭', function (){
// 새로운 추가 섹션은 쌍으로 되어 있습니다.
// (스위치 ID와 관련 콘텐츠 ID 포함)
// 그 뒤에 위치 인덱스가 옵니다. 배치됨
AccordionObject.addSection('togglersID', 'elementsID ', 0)
})
$('display_section').addEvent('click', function(){
// 페이지가 처음 로드될 때 표시되는 요소를 결정합니다.
// 표시 옵션 설정을 재정의합니다.
AccordionObject.display(4)
})


여기에서 이벤트가 언제 실행되었는지 확인할 수 있습니다.
onCompleteonActivonBackground
아래 버튼을 사용하여 콘텐츠 쌍을 추가해 볼 수 있습니다.
토글 1
토글 1의 내용은 토글 1의 내용은 토글 1의 내용은 토글 1의 내용은 토글 1의 내용은 토글 1의 내용은 다음과 같습니다. 토글 1 내용은
토글 2
토글 2 내용은
토글 3
토글 3 내용은
토글 4
토글 4 내용은 다음과 같습니다. 토글 4
토글 추가
토글 4


주의사항
.display의 내용은 인덱스를 식별할 수 있지만 addSection 메서드를 사용하면 이 섹션이 표시됩니다. 마지막 인덱스를 사용합니다
"fixedHeight" 옵션을 사용하는 경우 "show" 옵션에서는 효과가 없지만 "display" 옵션에서는 효과가 있습니다.
더 많은 아코디언 옵션, 이벤트 및 메서드
Accordion 클래스는 Fx.Element 클래스에서 상속되고, 이 클래스는 Fx 클래스에서 상속됩니다. 이러한 클래스의 다양한 옵션을 사용하여 아코디언을 최적화할 수 있습니다. 단순한 것 같지만 아코디언은 매우 유용하고 강력한 플러그인입니다. 누군가가 이것으로 어떤 효과를 만들어내는지 보고 싶습니다.

자세히 알아보기

설명서의 아코디언 섹션과 Fx.Elements 및 Fx를 참조하세요. 이 두 섹션입니다. MooTools 공식 데모 에서도 아코디언 사용법을 살펴볼 수 있습니다.

시작하는 데 필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.

MooTools 1.2의 핵심 라이브러리와 확장(추가) 라이브러리, 위의 예, 외부 JavaScript 파일, 간단한 HTML 페이지 및 CSS 파일이 포함됩니다.