본문 바로가기
자바스크립트&캔버스

제이쿼리 ( jQuery ) 의 세련된 다이얼로그

지난번 "자바스크립트 vs jQuery"편이 호응이 좋아서

jQuery 를 응용한 기능을 하나 소개하고자 합니다 :)

https://itadventure.tistory.com/78

 

자바스크립트 vs 제이쿼리 ( JQuery )

웹에서는 필수불가결 기술인 자바스크립트와 jQuery, 과연 어느것이 더 뛰어날까요? 오늘은 잠깐 시간 내어 관련 부분을 논해 봅니다. ​ 자바스크립트는 웹브라우저에서 작동하는 스크립트입니다. 서버 사이드가..

itadventure.tistory.com

바로 jQuery UI 다이얼로그창 기능 인데요.

보통 표준 웹에서 다이얼로그하면 아래와 같은 창을 말합니다.

아주 전통적인 alert 창이지요.

Confirm 이란 기능도 있긴 한데 버튼이 2개인거 빼고는 별 다를건 없습니다.

자바스크립트에서 지원하는 버튼형 선택창은 위의 2가지가 전부입니다.

객관식으로 PHP, ASP, JSP 3가지 선택지중 1가지를 선택하는 창을 띄우고 싶은데

방법이 없을까요?

자바스크립트로만 구성한다면 레이어를 이용해서 새로 만들어야 합니다.

꽤 내용이 길어지겠지요 :)

하지만 jQuery 라면 문제가 아주 쉽게 풀리지요.

이미 만들어놓은 기능이 있으니 사용법만 익혀서 가져다가 쓰면 됩니다.

어떻게 하는지 한번 살펴볼까요?


 1 

우선 준비 작업이 될 밑작업소스를 구성합니다.

아래와 같은 소스가 기준 소스가 되는데요 jQuery UI 라는걸 사용하는 기초 토대가 되니

항상 여기서 출발하시면 됩니다.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

</body>
</html>

 

 2 

<body> 태그 아래에 다이얼로그 창을 아래와 같이 구성합니다.

창의 제목도 정할 수 있는데요.

title 속성에 창의 제목이 될 내용을 넣어주시고,

<div>...</div> 태그 내에 본문을 넣어주시면 되지요.

<div id="dialog-message" title="선택하세요." style='display:none'>
  다음중 가장 많이 쓰는 웹언어는?<br/>
	PHP, ASP, JSP
</div>

 

 3 

그리고 이 창을 띄우는 jQuery 다이얼로그 함수를 실행하는 함수를 하나 정의합니다.

이름은 crayBtn1 이라고 정의했으나 뭐 자유롭게 지정해도 무관합니다 :)

<script>
function crayBtn1()
{
	$('#dialog-message').dialog({
		modal: true, 
		buttons: {
			"PHP": function() { $(this).dialog('close'); },
			"ASP": function() { $(this).dialog('close'); },
			"JSP": function() { $(this).dialog('close'); }
		}
	});
}
</script>

 

 4 

그리고 이 함수의 실행을 테스트하기 위한 버튼을 하나 넣어줍니다.

버튼을 누르면 crayBtn1() 함수를 호출할텐데요.

굳이 버튼을 누르지 않더라도 해당상황에 이 함수를 호출해주시도록 구성하시면 됩니다.

<button class="ui-button ui-widget ui-corner-all" onclick="crayBtn1()">창 띄우기</button>

 

 5 

화면은 다음과 같을 것입니다.

버튼도 jQuery 스타일이라서 약간 세련됩니다.

한번 클릭해볼까요? 오 3가지의 선택 창이 떴군요?

이 것이 바로 jQuery 다이얼로그 창 기능입니다.

한번 클릭해볼까요? 오 3가지의 선택 창이 떴군요?

이 것이 바로 jQuery 다이얼로그 창 기능입니다.

참고로 버튼의 갯수가 3개 뜬 것은 소스의 이 부분에서 buttons 의 딸린 자식들(?)이 3명이기 때문입니다. "PHP", "ASP", "JSP"

$('#dialog-message').dialog({
	modal: true, 
	buttons: {
		"PHP": function() { $(this).dialog('close'); },
		"ASP": function() { $(this).dialog('close'); },
		"JSP": function() { $(this).dialog('close'); }
	}
});

본 예제에서는 어떤 버튼을 선택하든 다이얼로그 창을 닫는 $(this).dialog('close'); 기능만을 실행하시면 그 뒷 부분에 원하시는 기능을 넣으면 해당 기능이 작동하는 것이지요.

$('#dialog-message').dialog({
	modal: true, 
	buttons: {
		"PHP": function() { $(this).dialog('close'); alert("정답"); },
		"ASP": function() { $(this).dialog('close'); alert("글쎄요"); },
		"JSP": function() { $(this).dialog('close'); alert("몰라요"); }
	}
});

다이얼로그 창 내부의 문구는 HTML 태그를 이용해서 칼라풀하게 자유롭게 꾸미실 수 있습니다.

만약 다이얼로그 창을 아래와 같이 구성하신다면,

<div id="dialog-message" title="선택하세요." style='display:none'>
  다음중 <span style='font-size:25pt;'>가</span>장 많이 쓰는 <b><u>웹언어</u></b>는?<br/>
	<span style='color:red'>PHP</span>, 
	<span style='color:green'>ASP</span>, 
	<span style='color:blue'>JSP</span>
</div>

결과는 이렇습니다.

다이얼로그 창을 여러개 구성하고 싶으신 경우 주의하실 점은

문구별로 id 값을 각각 다르게 해서 여러개의 div 를 만들어주신 다음,

<div id="dialog-message-1" title="선택하세요." style='display:none'>
  .. 내용
</div>
<div id="dialog-message-2" title="선택하세요." style='display:none'>
  .. 내용
</div>
<div id="dialog-message-3" title="선택하세요." style='display:none'>
  .. 내용
</div>

id 에 따른 스크립트 또한 여러개 만들어 주시면 되지요 :)

<script>
function crayBtn1()
{
	$('#dialog-message-1').dialog({
		modal: true, 
		buttons: {
			...
		}
	});
}
function crayBtn2()
{
	$('#dialog-message-2').dialog({
		modal: true, 
		buttons: {
			...
		}
	});
}
function crayBtn3()
{
	$('#dialog-message-3').dialog({
		modal: true, 
		buttons: {
			...
		}
	});
}
</script>

본 예제의 전체 소스는 아래와 같습니다.

여기까지 읽어주셔서 감사합니다 :)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog-message" title="선택하세요." style='display:none'>
  다음중 <span style='font-size:25pt;'>가</span>장 많이 쓰는 <b><u>웹언어</u></b>는?<br/>
	<span style='color:red'>PHP</span>, 
	<span style='color:green'>ASP</span>, 
	<span style='color:blue'>JSP</span>
</div>

<button class="ui-button ui-widget ui-corner-all" onclick="crayBtn1()">창 띄우기</button>


<script>
function crayBtn1()
{
	$('#dialog-message').dialog({
		modal: true, 
		buttons: {
			"PHP": function() { $(this).dialog('close'); },
			"ASP": function() { $(this).dialog('close'); },
			"JSP": function() { $(this).dialog('close'); }
		}
	});
}
</script>


</body>
</html>

#jQuery, #다이얼로그, #선택형, #객관식, #세련된UI, #dialog, #jQueryui, #코딩, #alert