JavaScript/jQuery) Dialog

 jQuery 에서 라이브러리 형태로 제공되는 다이얼로그를 사용하면 보다 간단하게 세련된 디자인의 다이얼로그를 사용할 수 있게 된다.

아래 링크에서 해당 라이브러리를 받을 수 있다. 이 때 반드시 필요한 파일은 jquery-ui.js와 jquery-ui.css 두 가지이다.

https://jqueryui.com/download/

Download Builder | jQuery UI

 

---

jQuery Dialog 호출 방식

 먼저 다이얼로그를 호출할 Element가 필요하다.

<div id="dialogSample"></div>

 그 다음, 해당 Element에 다이얼로그를 호출하는 코드는 아래와 같다. 주로 사용해본 옵션과 함수들을 나열했다.

$('#dialogSample').dialog({
	dialogClass: "class-a class-b", //띄어씀으로써 여러 개의 클래스 등록 가능
	autoOpen: true,
    escapeClose: false, // ESC버튼 클릭 시 자동 다이얼로그 종료
    draggable: false, // 다이얼로그를 드래그하여 이동시킬 수 있을지 여부
    height: 400px,
    width: 600px,
    modal: true, // true 지정 시 다이얼로그가 열릴 때 다이얼로그를 제외한 전체 화면 비활성화
    title: "Example",
    resizable: true, // 사이즈 변경 가능 여부
    button: [
    	{
        	text: "Ok",
            icon: "ui-icon-heart",
            click: function() {
            	// OK버튼 클릭 시 처리할 로직
        		$( this ).dialog( "close" );
            }
        }
    ],
    create: function(event, ui) { ... },
    close: function(event, ui) { ... },
    beforeClose: function(event, ui) { ... },
    destroy: function(event, ui) { ... },
    ...
    
});

 만약 다이얼로그의 종료 버튼을 숨기고 싶다면 아래와 같이 'no-close' 클래스를 부여할 수 있다.

$('#dialogSample').dialog({
	...
	dialogClass: "no-close",
    ...
});

 기본적인 디자인 외에도 jQuery UI에서 제공하는 다양한 테마를 이용해 다양한 테마의 위젯을 사용할 수 있다.

 

---

외부에 작성한 HTML파일을 다이얼로그로 열고 싶은 경우 $.load()를 통해 불러와 여기에 다이얼로그를 열 수 있다.

 

$('#selector').load('dailogTemplate.html').dialog({...});

 

 다른 방법으로는 다이얼로그를 연 다음, 내부 컨텐츠에 해당 html 파일을 열 수도 있다.

 

 다이얼로그에 현재 스크립트에서 사용되는 변수의 값을 전달하고 싶으면 아래와 같이 data()를 통해 전달할 수 있다.

$('#selector').data({
	"key1": value1,
    "key2": value2,
}).dialog({ 
	...
    open: {
    	let data = $(this).data("key");
    },
    ...
});