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

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

Cray Fall 2019. 8. 7. 23:01

지난번 "자바스크립트 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

저작자표시 비영리 변경금지

'자바스크립트와 캔버스' 카테고리의 다른 글

jQuery 함수 ( prototype ) 추가  (1) 2019.08.25
자바스크립트 일반메소드 vs 프로토타입  (0) 2019.08.24
자바스크립트 vs 제이쿼리 ( JQuery )  (4) 2019.08.05
3차원 웹, 클론? 복제! - 28번째 시간  (3) 2019.07.26
3차원 웹, 오우~ 돌핀! - 27번째 시간  (2) 2019.07.23

'자바스크립트와 캔버스' Related Articles

티스토리툴바