[jQuery] jQuery UI

밍챠코·2024년 4월 3일

jquery

jQuery/Bootstrap

목록 보기

3/6

🍀 jQuery UI

https://jqueryui.com/ 에서 제공하는 css, 메서드

▶︎ .draggable( )

: 마우스를 사용하여 요소 이동(드래그)

모든 DOM 요소에서 드래그 가능한 기능을 사용하도록 설정
드래그 가능한 개체를 마우스로 클릭하고 뷰포트 내의 아무 곳으로나 드래그하여 이동

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<style type="text/css">
	#draggable{width:150px;height:150px;padding:0.5em;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#draggable').draggable();
	});
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
	<p>Drag me around</p>
</div>
</body>
</html>

드래그할 시 움직임

▶︎ .droppable( )

: 드래그 가능한 요소에 대한 대상 생성 (해당 태그 위치에 drop 됐을 때와 out 됐을 때)

모든 DOM 요소를 드래그 가능한 요소의 대상인 드롭할 수 있도록 함

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<style type="text/css">
	#draggable{width:100px;height:100px;padding:0.5em;float:left;margin:10px 10px 10px 0;}
	#droppable{width:150px;height:150px;padding:0.5em;float:left;margin:10px;}
</style>
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#draggable').draggable();
		$('#droppable').droppable({
			drop:function(event,ui){
				//태그가 영역에 진입할 때 이벤트 발생
				$(this).addClass('ui-state-highlight') //추가하고
					   .find('p') //p태그 찾아서
					   .html('Dropped!'); //내용 변경
			},
			out:function(event,ui){
				//태그가 영역에서 벗어날 때 이벤트 발생
				$(this).removeClass('ui-state-highlight')
					   .find('p')
					   .html('Drop here');
			}
		});
	});
</script>
</head>

<body>
	<div id="draggable" class="ui-widget-content">
		<p>Drag me around</p>
	</div>
	
	<div id="droppable" class="ui-widget-header">
		<p>Drop here</p>
	</div>
</body>
</html>

▶︎ .accordion( )

: 제한된 공간에 정보를 표시하기 위해 접을 수 있는 콘텐츠 패널을 표시
(내용이 숨겨져있다가 타이틀을 누르면 나오는 것처럼 동작)

머리글을 클릭하여 탭과 매우 유사한 논리적 섹션으로 구분된 콘텐츠를 확장/축소
선택적으로 마우스 오버 시 섹션 열기/닫기를 전환

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#accordion').accordion();
	});
</script>
</head>
<body>
<div id="accordion">
	<h3>Section 1</h3>
	<div>
		<p>
			오늘은 목요일
		</p>
	</div>
	<h3>Section 2</h3>
	<div>
		<p>
			내일은 금요일
		</p>
	</div>
	<h3>Section 3</h3>
	<div>
		<p>
			모레는 토요일
		</p>
	</div>
</div>
</body>
</html>

▶︎ .datepicker( )

: 팝업 또는 인라인 달력에서 날짜 선택

표준 양식 입력 필드에 연결되어 작은 오버레이에서 대화형 달력을 엶
제한을 건다거나 표시/디자인을 바꾸고 싶을 시 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#datepicker').datepicker({
			showMonthAfterYear:true, //(default 월 연)
					// -은 /로 대체 가능
			dateFormat:'yy-mm-dd', //(주의)yyyy로 명시하면 연도 반복
			changeMonth:true, //월 변경
			dayNamesMin:['일','월','화','수','목','금','토'],
			monthNamesShort:['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
			changeYear:true //연도 변경
		});
	});
</script>
</head>
<body>
	<p>
		Date : <input type="text" id="datepicker">
	</p>
</body>
</html>

입력창 클릭 시
→ 월, 연도 변경 가능
날짜 클릭 시 yy-mm-dd 형식으로 자동입력

▶︎.dialog( )

: 다이얼로그 창에 내용을 띄움

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dialog').dialog();
	});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
	<p>대한민국의 수도 서울의 심장부인 강남의 역삼역 근처 한독 빌딩의 강의실입니다.</p>
</div>
</body>
</html>

※ dialog와 창의 차이점 : body를 벗어날 수 없음
→ x 누르면 dialog 닫힘

** button과 함께 사용

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dialog').dialog({
			autoOpen:false, //수동으로 다이얼로그 열기
			show:{
				effect:'blind',
				duration:1000
			},
			hide:{
				effect:'explode',
				duration:1000
			}
		}); //end of dialog
		
		//이벤트 연결
		$('#opener').click(function(){
			$('#dialog').dialog('open');
		});
	});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
	<p>대한민국의 수도 서울의 심장부인 강남의 역삼역 근처 한독 빌딩의 강의실입니다.</p>
</div>

<button id="opener">Open Dialog</button>
</body>
</html>

open dialog 버튼 클릭 시
x 누르면 흩어지면서 닫힘
사이즈 변경 가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="../css/jquery-ui.min.css">
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript">
	$(function(){
		$('#dialog').dialog({
			resizable:false, //사이즈 변경 불가
			height:200,
			modal:true, //다이얼로그가 표시되면 부모 영역을 선택할 수 없음
			buttons:{
				'Delete all items':function(){
					//다이얼로그 닫기
					$(this).dialog('close');
				},
				Cancel:function(){
					//다이얼로그 닫기
					$(this).dialog('close');
				}
			}
		});
	});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
	<p>대한민국의 수도 서울의 심장부인 강남의 역삼역 근처 한독 빌딩의 강의실입니다.</p>
</div>

<p>
	부산에서 여행 중에 방문할 수 있는 명소를 추천해주세요!!
</p>
</body>
</html>