Mootools 1.2 튜토리얼 탭 효과(탭)_Mootools-JS 튜토리얼-php.cn

간단한 "추가 정보" 태그(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'); 
} 

 

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

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

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

 
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 참고: 이는 이 튜토리얼 시리즈에서 다루는 내용이 충분히 포괄적이지 않다는 것을 의미하므로 모든 문서를 주의 깊게 읽는 것이 좋습니다.)

마지막 예시 코드 다운로드

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