Mootools 1.2 튜토리얼 탭 효과(탭)_Mootools

간단한 "추가 정보" 태그(TAB)
마우스를 위에 올리면 내용이 표시되는 탭
이 첫 번째 프로젝트에서는 마우스를 위에 올리면 해당 내용이 표시되는 간단한 메뉴를 만들어 보겠습니다. 이 메뉴 내용입니다. 먼저 HTML 코드를 완성해 보겠습니다. 4개의 목록 항목이 포함된 ul을 사용한 다음 4개의 div를 만듭니다(각 div는 목록 항목에 해당).
참조 코드:

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

// 메뉴는 다음과 같습니다

>
• 하나


• 둘


• 
  
• Four

// 여기 콘텐츠 div

1인용 콘텐츠

2인용 콘텐츠

3인용 콘텐츠

4인용 콘텐츠

이제 아름답게 만드는 것에 대해 걱정할 필요가 없습니다. CSS에서는 콘텐츠 블록을 숨기기만 하면 됩니다.
참조 코드: [코드 복사] [코드 저장]
.hidden {
display: none
}
알겠습니다. 이제 MooTools 코드 작성을 시작하세요. 사용자가 마우스를 위로 움직일 때 콘텐츠를 표시하고 마우스가 떠날 때 콘텐츠를 숨겨야 하는 경우 다음 두 가지 기능을 완료해야 합니다.
참조 코드:

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

var showFunction = function() {
this.setStyle('display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none');
}

또한 몇 가지 이벤트가 있습니다.
참조 코드 :

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

window.addEvent( 'domready', function() {
// 여기서는 컨테이너 요소를 변수에 할당할 수 있습니다.
var elOne = $('contentone')
$('one').addEvents({
// 마우스가 When에 진입하면 showFunction
//을 호출하고 이 요소 elOne을 바인딩합니다
// 따라서 함수 매개변수로 사용해야 합니다
'mouseenter': showFunction.bind(elOne ),
'museleave' : hideFunction.bind(elOne)
})
})
이제 각 탭에 대해 이 패턴을 반복하고 해당 콘텐츠 블록을 지정하기만 하면 됩니다. 전체 코드는 다음과 같습니다.
참조 코드: [코드 복사] [코드 저장]
// 스타일 변경에 사용되는 함수는 다음과 같습니다.
var showFunction = function() {
this. setStyle( 'display', 'block');
}
var hideFunction = function() {
this.setStyle('display', 'none')
}
window. addEvent( 'domready', function() {
// 여기서는 콘텐츠 블록을 다양한 변수에 할당합니다.
var elOne = $('contentone');
var elTwo = $('contenttwo') ;
var elThree = $('content three');
var elFour = $('contentfour')
// 탭에 이벤트 바인딩
$('one').addEvents({
//이벤트 유형 설정
// 해당 변수를 이벤트 제어 함수에 바인딩
'mouseenter': showFunction.bind(elOne),
'mouseleave': hideFunction.bind(elOne)
})
$('two').addEvents({
'mouseenter': showFunction.bind(elTwo),
'mouseleave': hideFunction.bind(elTwo)
} );
$('3').addEvents({
'mouseenter': showFunction.bind(elThree),
'mouseleave': hideFunction.bind(elThree)
})
$ ('four').addEvents({
'mouseenter': showFunction.bind(elFour),
'mouseleave': hideFunction.bind(elFour)
})
}); >

보시다시피 이 모든 것은 매우 친숙해 보이며 지금까지 배우지 않은 내용이 필요하지 않습니다.
하나
둘
셋
네
하나에 대한 콘텐츠
둘에 대한 콘텐츠
셋에 대한 콘텐츠
넷에 대한 콘텐츠
탭을 클릭하면 콘텐츠가 표시됩니다.
위의 아이디어를 빌려 클릭하면 콘텐츠가 표시되도록 쉽게 조정할 수 있습니다. 위의 HTML을 사용한 다음 MooTools 코드를 수정하여 클릭 이벤트를 완료하겠습니다.
먼저 기능을 조정해야 합니다. 마우스가 떠날 때 콘텐츠를 숨길 수 없으므로 이러한 div를 전환하는 다른 방법을 찾아야 합니다. 아마도 가장 쉬운 옵션은 클릭할 때 먼저 모든 항목을 숨긴 다음 이 항목이 가리키는 현재 콘텐츠(클릭 이벤트를 통해 전달된 개체)만 표시하는 것입니다.
참조 코드:

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

var showFunction = function() {
$$('.hiddenB').setStyle('display', 'none')
this.setStyle('display', 'block')
}

이제 요소를 함수에 바인딩하여 이 변수를 전달하면 다른 블록이 숨겨지고 현재 블록이 표시됩니다.
다음으로 이벤트도 조정해야 합니다. 먼저 이벤트가 하나만 필요하므로 .addEvent() 메서드를 사용한 다음 이벤트 유형도 "click"으로 변경해야 합니다.
참조 코드:

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

window.addEvent ('domready', function() {
var elOneB = $('contentoneB');
var elTwoB = $('contenttwoB');
var elThreeB = $('content3B');
var elFourB = $('contentfourB');
$('oneB').addEvent('click', showFunction.bind(elOneB))
$('twoB').addEvent('click' , showFunction.bind(elTwoB));
$(' threeB').addEvent('click', showFunction.bind(elThreeB))
$('fourB').addEvent('click', showFunction .bind( elFourB))
});

하나
둘
셋
네
하나
둘
3인용 콘텐츠
4인용 콘텐츠
탭의 콘텐츠 블록에 변형 추가
위의 코드를 확장하면 변형 효과를 추가하여 숨겨진 콘텐츠 블록을 표시할 수 있습니다. 먼저 이전과 같이 Fx.Morph 효과를 만들 수 있지만 여기서는 스타일을 다르게 지정하겠습니다. 물론 Morph 객체도 생성해야 합니다.
참조 코드:

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

var showFunction = function() {
// 변형 전 모든 스타일 초기화
$$('.hiddenM').setStyles({
'display': 'none ',
'불투명도': 0,
'배경색': '#fff',
'글꼴 크기': '16px'
})// 여기에서 시작 변형 및 변형된 스타일 지정
this.start({
'display': 'block',
'opacity': 1,
'Background-color': '#d3715c' ,
'글꼴 크기': '31px'
});
}
window.addEvent('domready', function() {
var elOneM = $('contentoneM') ;
var elTwoM = $('contenttwoM');
var elThreeM = $('content threeM');
var elFourM = $('contentfourM')
// 변형 개체 생성
elOneM = new Fx.Morph(elOneM, {
링크: '취소'
});
elTwoM = new Fx.Morph(elTwoM, {
링크: '취소'
});
elThreeM = new Fx.Morph(elThreeM, {
link: '취소'
})
elFourM = new Fx.Morph(elFourM, {
link: '취소'
});
$('oneM').addEvent('click', showFunction.bind(elOneM))
$('twoM').addEvent('click', showFunction.bind (elTwoM) );
$(' threeM').addEvent('click', showFunction.bind(elThreeM))
$('fourM').addEvent('click', showFunction.bind(elFourM ));
})

위와 동일한 HTML 코드를 사용하면 다음과 같은 결과가 나옵니다.
One
Two
Three
Four
1인용 콘텐츠
2인용 콘텐츠
3인용 콘텐츠
4인용 콘텐츠
참고: 위의 예를 빠르게 클릭하면 동시에 여러 콘텐츠가 나타나는 것을 볼 수 있습니다. 기본적으로 마지막 변환이 완료되기 전에 showFunction을 호출하면 다른 블록 내용이 숨겨지지 않습니다. 이 문제를 해결하려면 이 규칙을 깨고 Fx.Elements를 최대한 활용해야 합니다.
코드 예시
다음 예시는 위 예시와 유사하지만 두 개의 탭을 빠르게 클릭하면 여러 콘텐츠 div가 동시에 표시되지 않습니다.
참조 코드:

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

// 모든 요소를 ​​숨기는 함수 만들기
// 요소를 매개변수로 전달할 수 있습니다
var hideAll = function(fxElementObject){
fxElementObject.set({
'0': {
'디스플레이': '없음'
},
'1': {
'디스플레이': '없음'
},
'2': {
'디스플레이': '없음'
},
'3': {
'디스플레이': '없음'
}
})
}
// 여기서는 각 콘텐츠 블록에 대한 함수를 만듭니다.
var showFunctionOne = function() {
// 먼저 hideAll 함수를 호출합니다.
// 그런 다음 Fx.element 개체의 "this" 참조를 호출합니다.
hideAll(this);
에 매개변수 전달// 해당 요소의 Fx.element 변형 애니메이션 시작
this.start({
'0': {
'디스플레이': [' 없음', '블록'],
'배경색': ['#fff', '#999'],
'글꼴 크기': ['16px', ' 25px']
}
});
}
var showFunctionTwo = function() {
hideAll(this)
this.start({
'1': {
'표시': ['없음', '블록'],
'배경색': ['#fff', '#999'],
'글꼴 크기': [' 16px', '25px' ]
}
});
}
var showFunctionThree = function() {
hideAll(this)
this.start({
'2': {
'디스플레이': ['없음', '블록'],
'배경색': ['#fff', '#999'],
'글꼴 크기 ': ['16px' , '25px']
}
});
}
var showFunctionFour = function() {
hideAll(this)
this.start( {
'3': {
'디스플레이': ['없음', '차단'],
'배경색': ['#fff', '#999'],
'글꼴 크기': ['16px', '25px']
}
});
}
window.addEvent('domready', function() {
// 생성 Fx.elements를 저장하기 위한 배열
var morphElements = $$('.hiddenMel');
// 새로운 Fx.Element 객체 생성
var elementEffects = new Fx.Elements(morphElements, {
// "링크" 설정이 취소되었습니다
link: 'cancel'
})
$('oneMel').addEvent('click', showFunctionOne.bind(elementEffects))
$( 'twoMel').addEvent('click', showFunctionTwo.bind(elementEffects))
$(' threeMel').addEvent('click', showFunctionThree.bind(elementEffects))
$ ('fourMel').addEvent('click', showFunctionFour.bind(elementEffects));
});

추가 학습
이 튜토리얼은 이전 튜토리얼에서 배운 내용을 배웠습니다. 따라서 아직 준비가 되지 않았다면 해당 설명서를 모두 읽어 보시기를 권장합니다. 이것은 생각보다 더 흥미롭습니다. 이 라이브러리를 처음 접했지만 이 튜토리얼 시리즈를 따라왔다면 얼마나 이해하고 있는지 놀라실 것입니다. (Fdream 참고: 이는 이 튜토리얼 시리즈에서 다루는 내용이 충분히 포괄적이지 않다는 것을 의미하므로 모든 문서를 주의 깊게 읽는 것이 좋습니다.)

마지막 예시 코드 다운로드

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