jQuery EasyUI 튜토리얼-툴팁(프롬프트 상자)

이전 기사에서는 jQuery EasyUI 튜토리얼-ProgressBar(진행률 표시줄)에 대해 소개했습니다. 이 구성 요소는 직장에서 프런트엔드 개발자가 흔히 사용하는 구성 요소입니다. 다음으로 jQuery-Tooltip(프롬프트 상자) 구성 요소를 소개하겠습니다. , 작업 과정에서도 매우 유용합니다.

이 글에서는 jQuery-Tooltip(프롬프트 박스)의 활용 사례를 자세히 설명하고, 단계별 코드 구현 과정을 통해 Tooltip 구현을 마스터할 수 있을 뿐만 아니라, 또한 프론트엔드 개발 수준에서 프로그래밍에 대한 관심과 열정을 높여보세요.

기본값 개체를 재정의하려면 $.fn.tooltip.defaults를 사용하세요. (번역자 주: 버전 1.3.3의 새로운 플러그인)

사용자가 요소 위에 마우스를 올리면 메시지 프롬프트 상자가 표시됩니다. 프롬프트 상자의 컨텐츠는 페이지의 HTML 요소일 수도 있고 Ajax를 통해 백그라운드 요청을 보내 프롬프트 상자의 컨텐츠를 얻을 수도 있습니다.

사용 사례:

프롬프트 상자 만들기

태그와 Javascript를 통해 프롬프트 상자를 만듭니다.

1. 태그를 통해 프롬프트 상자를 생성하고 Javascript 코드 없이 요소에 "easyui-tooltip"이라는 클래스 이름을 추가합니다.

<a href=”#” title=”This is the tooltip message.” class=”easyui-tooltip”>Hover me</a>

2. Javascript를 통해 프롬프트 상자를 만듭니다.

<a id=”dd” href=”javascript:void(0)”>Click here</a>

$(‘#dd’).tooltip({
position: ‘right’,
content: ‘<span style=”color:#fff”>This is the tooltip message.</span>’,
onShow: function(){
$(this).tooltip(‘tip’).css({
backgroundColor: ‘#666′,
borderColor: ‘#666′
});
}
});

속성:

이벤트:

메서드:

위 내용은 jQuery EasyUI 튜토리얼-툴팁(프롬프트박스) 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요. !