또한 도구 설명 옵션과 이벤트는 물론 요소에 도구 설명을 추가하고 제거하는 몇 가지 도구도 자세히 살펴보겠습니다. 마지막으로, 한 페이지에 다양한 스타일의 여러 툴팁을 표시하는 방법을 알아봅니다.
기본
새 툴팁 만들기
새 툴팁을 만드는 것은 쉽습니다. 먼저 툴팁을 추가하고 싶은 링크를 만들어 보겠습니다.
참조 코드:
MooTools 1.2 툴팁은 기본적으로 링크의 title 및 rel 속성 값을 표시합니다. rel 속성이 없으면 href 속성 값이 표시됩니다.
이제 새로운 기본 도구 모음 팁을 만듭니다.
참조 코드:
var customTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
스타일이 사용되지 않으므로 다음과 같이 표시됩니다. 다음과 같은 툴팁에:
툴팁 1
툴팁에 스타일 사용
MooTools는 출력에 대한 많은 제어 기능을 제공합니다. 툴팁에 대한 HTML 코드를 살펴보겠습니다.
참조 코드:
// 지정할 수 있습니다
옵션 >
상단 및 하단 div에 주의하여 상단 및 하단에 둥근 모서리나 기타 스타일링 효과를 쉽게 추가할 수 있습니다.
이제 첫 번째 옵션을 만들고 CSS를 추가해 보겠습니다. 위의 HTML 코드는 "options.className"이라는 CSS 스타일로 렌더링됩니다. 도구 설명에 CSS 클래스 이름을 지정하면 페이지의 다른 MooTools 도구 설명에 영향을 주지 않고 독립적인 스타일을 지정할 수 있습니다.
패딩: 5px
}
.custom_tip .tip-title {
색상: #fff
배경색: #666
글꼴 크기: 20px
패딩: 5px
}
.custom_tip .tip-text {
색상: #fff
패딩: 5px
}
도구 팁 2
옵션
팁 카테고리에는 총 5개의 옵션만 있으며 각 옵션은 매우 자명합니다(즉, 한눈에 의미를 이해할 수 있음).
showDelay
기본값은 100입니다.
마우스를 요소 위로 이동한 후 도구 설명이 기다리는 시간을 결정하는 정수(밀리초)입니다.
hideDelay
기본값은 100
위의 showDelay와 동일하지만 이 값(밀리초 단위)은 마우스가 요소를 떠날 때 도구 설명을 숨기는 데 걸리는 시간을 결정합니다.
className
기본값은 null
위의 예에서 볼 수 있듯이 이를 통해 도구 설명 컨테이너의 CSS 클래스 이름을 설정할 수 있습니다.
오프셋
기본값은 x:16, y:16입니다.
이에 따라 요소에서 툴팁까지의 거리가 결정됩니다. x 값은 요소 오른쪽까지의 거리이고 y 값은 요소로부터 아래까지의 거리(고정 옵션이 false로 지정된 경우 거리는 마우스 포인터를 기준으로 하고, 그렇지 않으면 요소를 기준으로 한 거리가 됩니다).
고정
기본값은 false
이 설정은 마우스가 요소 위로 이동할 때 도구 설명이 마우스를 따라갈지 여부를 결정합니다. true로 설정하면 도구 설명은 마우스 포인터의 움직임에 따라 움직이지 않고 요소 근처의 고정 위치에 유지됩니다.
이벤트
이 클래스의 다른 모든 것과 마찬가지로 툴팁 이벤트도 매우 간단합니다. onShow 및 onHide라는 두 가지 이벤트가 있으며 예상대로 작동합니다.
onShow
이 이벤트는 툴바가 표시될 때 트리거됩니다. 지연을 설정하면 도구 설명이 표시될 때까지 이 이벤트가 실행됩니다.
onHide
는 위의 onShow 이벤트와 동일하지만 툴팁이 숨겨졌을 때 발생합니다. 지연이 설정되면 도구 설명이 숨겨질 때까지 이 이벤트도 실행됩니다.
메서드
팁 클래스에는 연결 및 분리라는 두 가지 메서드가 있습니다. 이 두 메서드를 통해 지정된 요소에 도구 설명을 추가하거나(물론 이러한 도구 설명은 동일한 설정을 갖습니다) 제거할 수 있습니다. 특정 요소의 툴팁.
.attach();
새 요소에 툴팁을 추가하려면 Tip 개체 뒤에 .attach();를 추가하고 마지막으로 이 요소의 선택기를 괄호 안에 넣으면 됩니다.
참조 코드:
toolTips.attach ('# tooltipID3');
.dettach()
이 방법은 .attach 방법과 동일하지만 동작이 완전히 반대입니다. 먼저 Tip 개체를 작성한 다음 요소 뒤에 .dettach();를 추가하고 마지막으로 이 요소의 선택기를 괄호 안에 넣습니다.
참조 코드:
toolTips.dettach ('# tooltipID3');
코드 예제
이 예제에서는 두 가지 다른 스타일의 툴팁을 가질 수 있도록 두 개의 서로 다른 Tip 플러그인 인스턴스를 생성합니다. 또한 위에서 본 옵션, 이벤트 및 방법을 통합할 것입니다.
참조 코드:
var customTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// 툴팁 표시 지연 시간을 설정합니다.
showDelay: 1000 , // 기본값은 100입니다.
// 툴팁 숨기기에 대한 지연 이벤트가 설정됩니다.
hideDelay: 100, // 기본값은 100입니다.
// 툴팁의 컨테이너 div에 CSS 스타일이 추가됩니다.
// 이렇게 하면 한 페이지에 두 가지 스타일의 도구 모음 팁을 사용할 수 있습니다.
//
className: 'anything', // 기본값은 null입니다.
// x와 y가 설정됩니다.
오프셋에 대한 오프셋 값: {
'x': 100, // 기본값은 16
'y': 16 // 기본값은 16
},
// 도구 설정 마우스를 따라갈지 여부를 묻습니다
// true로 설정하면 마우스가 따라가지 않습니다
fixed: false, // 기본값은 false
// 옵션 외부에서 이 함수를 호출하는 경우
// 이 함수는 여기에 그대로 있습니다
// 깜박이고 부드러운 그라데이션 효과가 있습니다
onShow: function(toolTipElement){
// 툴팁 개체 전달
// 페이드를 완전히 불투명하게 만들 수 있습니다
// 또는 약간 투명하게 만들 수 있습니다
toolTipElement.fade(.8)
$('show').highlight('#FFF504')
},
onHide: function(toolTipElement){
toolTipElement.fade(0)
$('hide').highlight('#FFF504')
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', // 기본값은 null
})// .store()를 사용할 수 있습니다. rel을 변경하는 방법
의 값// 이에 따라 툴팁의 값이 변경됩니다.
// 다음 코드를 사용할 수 있습니다
$('tooltipID1').store('tip:text', ' href를 원하는 텍스트로 바꿀 수 있습니다.')
$('tooltipID1').store('tip:title', 'Here is a new title.'); 도구 설명은 변경되지 않습니다.
$('tooltipID1').set('rel', '이것은 도구 설명 텍스트가 변경되지 않습니다.')
$('tooltipID1').set('title ', '툴팁 제목은 변경되지 않습니다.');
toolTips.detach('#tooltipID2')
toolTips.detach('#tooltipID4')
toolTips.attach('#tooltipID4' );
도구 설명 1
툴팁이 분리되었습니다
도구 설명 3
툴팁을 분리했다가 다시 부착했습니다.
다른 스타일의 도구 설명
자세히 알아보기
MooTools 문서의
팁 섹션을 읽어보세요. 또한 Mootools 팁 사용자 정의에 관해 David Walsh가 쓴 아주 좋은 기사도 있습니다.
필요한 모든 것이 포함된 zip 패키지를 다운로드하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
