Notice

Recent Comments

Link

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Tags more

Archives

관리 메뉴

Crescendo Code

5월 19일 (금) - [ jQuery UI - Menu / Tabs / Tooltip ] 본문

KIC 백엔드 수업

5월 19일 (금) - [ jQuery UI - Menu / Tabs / Tooltip ]

Crecok 2023. 5. 19. 11:37

과제

1. 전날 진행했던 회원 관리 프로그램 - 월요일 제출 : 캡쳐 ( 프로토콜 디자인 / 리스트 화면 / 소스 )

2. 아래 파일의 디자인 소스가 적용된 게시판 만들기 ( 반드시 1번을 먼저 할 것 )

board01.jsp

0.01MB

jQuery UI - Menu

- 메뉴 항목의 클릭(콘솔 확인), 항목 비활성화, 카테고리 생성 예제

- 태그의 ui-state-disabled 클래스 속성 : 내부 비활성화 설정

- 태그의 ui-widget-header 클래스 속성 : 카테고리 생성

- 아이콘을 추가하는 메뉴도 만들어보기 (사이트의 Icons 메뉴 탭 참조)

▶ 참고 자료 일부 : https://jqueryui.com/menu → view source

▶ 다이나믹 프로젝트 jQueryUIEx02 그대로 사용

▶ menu01.jsp 생성 후 코드 작성 (실행)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
	.ui-menu { width : 200px; }
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#menu' ).menu({
			
			// 카테고리 선택 불가 설정
			items : '> :not(.ui-widget-header)',
			select : function() {
				console.log( 'select' );
			}
		});
	});
</script>
</head>
<body>

<ul id="menu">
	<li class="ui-widget-header"><div>category 1</div></li>
	<li class="ui-state-disabled"><div>Toys (n/a)</div></li>
	<li><div>Books</div></li>
	<li><div>Clothing</div></li>
	<li><div>Electronics</div>
		<ul>
			<li><div>Home Entertainment</div></li>
			<li><div>Car Hifi</div></li>
			<li><div>Utilities</div></li>
		</ul>
	</li>
  
  	<li class="ui-widget-header"><div>category 2</div></li>
	<li><div>Movies</div></li>
	<li><div>Music</div>
		<ul>
			<li><div>Rock</div>
				<ul>
					<li><div>Alternative</div></li>
					<li><div>Classic</div></li>
				</ul>
			</li>
			<li><div>Jazz</div>
				<ul>
					<li><div>Freejazz</div></li>
					<li><div>Big Band</div></li>
					<li><div>Modern</div></li>
				</ul>
			</li>
			<li><div>Pop</div></li>
		</ul>
	</li>
	<li class="ui-state-disabled"><div>Specials (n/a)</div></li>
</ul>
 
</body>
</html>

jQuery UI - Tabs

- 버튼을 클릭했을 때, 추가 탭과 그 탭의 내용이 새로 생성되는 예제

- 탭의 내용은 마우스오버 효과를 부여할 것

▶ 참고 자료 일부 : https://jqueryui.com/tabs → view source

▶ tabs01.jsp 생성 후 코드 작성 (실행)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/base/jquery-ui.css" />
<style type="text/css">
	.ui-tabs { width : 80%; }
</style>
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( '#tabs' ).tabs({
			event : "mouseover"
		});
		
		$( '#btn1' ).button().on( 'click', function() {
			$( '#tabs > ul' ).append( '<li><a href="#tabs-4">etc</a></li>' );
			$( '#tabs' ).append( '<div id="tabs-4"><p>내용 구문</p></div>' );
			$( '#tabs' ).tabs( 'refresh' );
		});
	});
</script>
</head>
<body>

<button id="btn1">추가</button>
<br /><hr /><br />

<div id="tabs">
	<!-- tab 목록 -->
	<ul>
		<li><a href="#tabs-1">Nunc tincidunt</a></li>
		<li><a href="#tabs-2">Proin dolor</a></li>
		<li><a href="#tabs-3">Aenean lacinia</a></li>
	</ul>
	
	<!-- tab 내용 -->
	<div id="tabs-1">
		<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
	</div>
	<div id="tabs-2">
		<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
	</div>
	<div id="tabs-3">
		<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
		<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
	</div>
</div>

</body>
</html>

jQuery UI - Tooltip

- title 속성이 tooltip화 된다.

▶ 참고 자료 일부 : https://jqueryui.com/tooltip → view source

▶ tooltip01.jsp 생성 후 코드 작성 (실행)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/base/jquery-ui.css" />
<script type="text/javascript" src="./js/jquery-3.7.0.js"></script>
<script type="text/javascript" src="./js/jquery-ui.js"></script>
<script type="text/javascript">
	$( document ).ready( function() {
		$( documnet ).tooltip();
	});
</script>
</head>
<body>

<p><a href="#" title="That&apos;s what this widget is">Tooltips</a> can be attached to any element. When you hover
the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.</p>
<p>But as it&apos;s not a native tooltip, it can be styled. Any themes built with
<a href="http://jqueryui.com/themeroller/" title="ThemeRoller: jQuery UI&apos;s theme builder application">ThemeRoller</a>
will also style tooltips accordingly.</p>
<p>Tooltips are also useful for form elements, to show some additional information in the context of each field.</p>
<p><label for="age">Your age:</label><input id="age" title="We ask for your age only for statistical purposes."></p>
<p>Hover the field to see the tooltip.</p>
 
</body>
</html>

저작자표시 비영리 변경금지 (새창열림)

'KIC 백엔드 수업' 카테고리의 다른 글

5월 25일 (목) - [] (0)	2023.05.25
5월 22일 (월) - [] (0)	2023.05.22
5월 17일 (수) - [ jQuery UI / 구구단 / 우편번호 검색기 ] (0)	2023.05.17
5월 16일 (화) - [ JQuery 구문 / 시작단 ~ 끝단 구구단 / 우편번호 검색기 ] (1)	2023.05.16
5월 15일 (월) - [ AJAX 추가예제 / JQuery 예제 ] (0)	2023.05.15