jqueryui 를 사용하기 위해서는 먼저 이전 글을 통해 ui다운로드 및 세팅을 해주셔야 합니다.
[JAVA 개발] jqueryUI 사용법 및 버튼태그 UI적용 페이지를 참고하세요.
툴팁이란 ?
마우스를 해당 이미지화면이나 특정 대상에 가져다 놓으면 해당 대상에 대한 세부 설명이 나오는것을 말합니다.
jqueryUI를 통한 툴팁 적용법은 간단합니다.
소스코드
<link href="/resources/jqueryui/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/resources/jqueryui/jquery-ui.js"></script>
<script>
$(function(){
$(document).tooltip();
});
</script>
</head>
<body>
<a href="http://www.naver.com" title="네이버로이동합니다.">네이버</a>
||
<a href="http://daum.net" title="다음으로이동합니다.">다음</a>
</body>
① 기존 스크립트처럼 ID생성을 하지 않았습니다. document에 바로 적용했습니다.
document에 주면 body페이지의 태그중 title속성값이 존재하는 모든 태그들에 마우스를 올려놓으면 툴
팁기능이 동작하는것 입니다.
② HTML 소스 a태그를 통해서 툴팁화면 출력
실행화면
마우스를 올려놓을경우 말풍선에 title 내용이 화면으로 보여지는것이 확인됩니다.
document로 바로 적용하지 않고 ID값으로 하나의 값만 적용하는것도 가능하며, 응용이 가능합니다.
'JAVA개발' 카테고리의 다른 글
| [JAVA 개발] 현재 날짜 가져오기 (0) | 2015.08.19 |
|---|---|
| [JAVA 개발] jqueryUI 탭기능을 이용한 컨텐츠 나누기 (0) | 2015.07.31 |
| [JAVA 개발] jqueryUI 드래그앤드롭기능 이용 (0) | 2015.07.30 |
| [JAVA 개발] jqueryUI를 이용한 어코디언 만들기 (0) | 2015.07.29 |
| [JAVA 개발] jqueryUI를 이용한 레이어팝업(모달창)만들기 (0) | 2015.07.29 |
