JQuery dialog()란?
jQuery UI의 `dialog()` 메서드는 사용자 인터페이스에서 대화 상자를 만들고 제어하는 데 사용되는 강력한 도구입니다. 이를 사용하면 모달 대화 상자, 경고창, 팝업 창 등을 쉽게 만들 수 있습니다. 이 메서드를 사용하면 대화 상자의 모양, 동작 및 기능을 완전히 사용자 정의할 수 있습니다. 이것은 웹 응용 프로그램에서 다양한 용도로 사용됩니다.
`dialog()` 메서드는 웹 페이지에 jQuery 및 jQuery UI를 포함하고, 다이얼로그를 만들고자 하는 HTML 요소를 선택한 후에 호출됩니다. 여러 옵션을 설정하여 대화 상자의 모양과 동작을 조정할 수 있습니다.
예를 들어, 다음은 간단한 대화 상자를 만드는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery UI Dialog Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="Basic Dialog">
<p>This is an example dialog.</p>
</div>
<script>
$(document).ready(function(){
$("#dialog").dialog();
});
</script>
</body>
</html>
이 예제에서는 "dialog"라는 ID를 가진 div 요소를 대화 상자로 만듭니다. 대화 상자에는 "Basic Dialog"라는 제목과 "This is an example dialog."라는 텍스트가 포함되어 있습니다. `dialog()` 메서드를 호출하여 이 요소를 대화 상자로 변환하고, 사용자가 대화 상자를 닫을 수 있도록 합니다.
`dialog()` 메서드의 주요 옵션 중 일부는 다음과 같습니다.
1. `autoOpen`: 페이지 로드시 자동으로 대화 상자를 열지 여부를 지정합니다.
2. `modal`: 모달 대화 상자로 설정할지 여부를 지정합니다. 모달 대화 상자는 사용자가 대화 상자 외부를 클릭하거나 키보드를 사용하여 다른 요소에 포커스를 이동할 수 없습니다.
3. `resizable`: 대화 상자의 크기를 조정할 수 있는지 여부를 지정합니다.
4. `draggable`: 대화 상자를 드래그하여 이동할 수 있는지 여부를 지정합니다.
5. `closeText`: 닫기 버튼에 표시할 텍스트를 지정합니다.
6. `buttons`: 대화 상자에 추가할 버튼을 정의합니다.
예를 들어, 모달 대화 상자를 만들고 버튼을 추가하는 예제는 다음과 같습니다.
$(document).ready(function(){
$("#dialog").dialog({
autoOpen: false, // 페이지 로드시 자동으로 열리지 않음
modal: true, // 모달 대화 상자로 설정
resizable: false, // 크기 조절 불가능
draggable: false, // 드래그 이동 불가능
closeText: "닫기", // 닫기 버튼 텍스트 설정
buttons: {
"확인": function() {
$(this).dialog("close");
},
"취소": function() {
$(this).dialog("close");
}
}
});
// 버튼 클릭 시 대화 상자 열기
$("#opener").on("click", function() {
$("#dialog").dialog("open");
});
});
위의 예제에서는 대화 상자를 페이지 로드시 자동으로 열리지 않도록 설정하고, 모달 대화 상자로 만들었습니다. 또한 크기 조절과 드래그 이동을 비활성화하고, "확인"과 "취소" 버튼을 추가했습니다.
이렇게 `dialog()` 메서드를 사용하면 사용자에게 효과적인 메시지를 제공하고, 상호 작용할 수 있는 대화 상자를 만들 수 있습니다. 이는 웹 응용 프로그램의 사용자 경험을 향상시키는 데 유용합니다.
'게으른 개발자의 끄적거림' 카테고리의 다른 글
| React로 어플리케이션 개발해서 배포하는 방법 (0) | 2024.03.18 |
|---|---|
| Jsp JavaBean이란? (feat. 액션태그 jsp:useBean ) (0) | 2024.03.14 |
| SQL 매개변수 받는 방법 (0) | 2024.03.12 |
| ASP JSP PHP 설명 및 차이점 (0) | 2024.03.12 |
| INPUT 태그 엔터키 막는 방법 (0) | 2024.03.08 |