JqueryUI-대화 상자

대화 상자는 HTML 페이지에 정보를 표시하는 좋은 방법 중 하나입니다. 대화 상자는 제목과 내용 영역이있는 부동 창입니다. 이 창은 기본적으로 "X"아이콘을 사용하여 이동, 크기 조정 및 닫을 수 있습니다.

jQueryUI는 dialog() 페이지에 작성된 HTML 코드를 HTML 코드로 변환하여 대화 상자를 표시하는 메소드입니다.

통사론

그만큼 dialog() 방법은 두 가지 형태로 사용될 수 있습니다-

  • $ (selector, context) .dialog (options) 메서드

  • $ (selector, context) .dialog ( "action", [params]) 메서드

$ (선택기, 컨텍스트) .dialog (옵션) 메서드

대화 상자 (옵션) 메서드는 HTML 요소가 대화 상자의 형태로 투여 될 수 있음을 선언합니다. 옵션 이 윈도우의 모양과 동작을 지정하는 객체입니다 매개 변수입니다.

통사론

$(selector, context).dialog(options);

Javascript 객체를 사용하여 한 번에 하나 이상의 옵션을 제공 할 수 있습니다. 제공 할 옵션이 두 개 이상인 경우 다음과 같이 쉼표를 사용하여 구분합니다.

$(selector, context).dialog({option1: value1, option2: value2..... });

다음 표는 이 방법과 함께 사용할 수있는 다양한 옵션 을 나열합니다.

Sr. 아니. 옵션 및 설명
1 appendTo

이 옵션이 다음으로 설정된 경우 false, 그것은 방지합니다 ui-draggable클래스가 선택된 DOM 요소 목록에 추가되지 않습니다. 기본적으로 값은true.

Option - appendTo

이 옵션은 지정된 요소에 대화 상자를 추가하는 데 사용됩니다. 기본적으로 값은"body".

Syntax

$(".selector").dialog(
   { appendTo: "#identifier" }
);
2 autoOpen

이 옵션을 false로 설정하지 않으면 생성시 대화 상자가 열립니다. 때 잘못된 대화 상자가 호출에 열립니다 ( '개방') 대화합니다. 기본적으로 값은true.

Option - autoOpen

이 옵션을 false로 설정하지 않으면 생성시 대화 상자가 열립니다. 때 잘못된 대화 상자가 호출에 열립니다 ( '개방') 대화합니다. 기본적으로 값은true.

Syntax

$(".selector").dialog(
   { autoOpen: false }
);
삼 버튼

이 옵션은 대화 상자에 버튼을 추가합니다. 이들은 객체로 나열되며 각 속성은 버튼의 텍스트입니다. 값은 사용자가 버튼을 클릭 할 때 호출되는 콜백 함수입니다. 기본적으로 값은{}.

Option - buttons

이 옵션은 대화 상자에 버튼을 추가합니다. 이들은 객체로 나열되며 각 속성은 버튼의 텍스트입니다. 값은 사용자가 버튼을 클릭 할 때 호출되는 콜백 함수입니다. 기본적으로 값은{}.

이 핸들러는 대화 상자 요소의 함수 컨텍스트로 호출되며 버튼이 대상 속성으로 설정된 이벤트 인스턴스로 전달됩니다. 생략하면 대화 상자에 대한 버튼이 생성되지 않습니다.

Syntax

$(".selector").dialog(
   { buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ] }
);
4 closeOnEscape

이 옵션을 false로 설정하지 않으면 대화 상자에 포커스가있는 동안 사용자가 Esc 키를 누르면 대화 상자가 닫힙니다. 기본적으로 값은true.

Option - closeOnEscape

이 옵션을 false로 설정하지 않으면 대화 상자에 포커스가있는 동안 사용자가 Esc 키를 누르면 대화 상자가 닫힙니다. 기본적으로 값은true.

Syntax

$(".selector").dialog(
   { closeOnEscape: false }
);
5 closeText

이 옵션에는 닫기 버튼의 기본값 인 닫기를 대체하는 텍스트가 포함되어 있습니다. 기본적으로 값은"close".

Option - closeText

이 옵션에는 닫기 버튼의 기본값 인 닫기를 대체하는 텍스트가 포함되어 있습니다. 기본적으로 값은"close".

Syntax

$(".selector").dialog(
   { closeText: "hide" }
);
6 dialogClass

이 옵션이 다음으로 설정된 경우 false, 그것은 방지합니다 ui-draggable클래스가 선택된 DOM 요소 목록에 추가되지 않습니다. 기본적으로 값은"".

Option - dialogClass

이 옵션이 다음으로 설정된 경우 false, 그것은 방지합니다 ui-draggable클래스가 선택된 DOM 요소 목록에 추가되지 않습니다. 기본적으로 값은"".

Syntax

$(".selector").dialog(
   { dialogClass: "alert" }
);
7 드래그 가능

이 옵션을 사용하지 않는 한 false, 대화 상자는 제목 표시 줄을 클릭하고 드래그하여 드래그 할 수 있습니다. 기본적으로 값은true.

Option - draggable

이 옵션을 사용하지 않는 한 false, 대화 상자는 제목 표시 줄을 클릭하고 드래그하여 드래그 할 수 있습니다. 기본적으로 값은true.

Syntax

$(".selector").dialog(
   { draggable: false }
);
8 신장

이 옵션은 대화 상자의 높이를 설정합니다. 기본적으로 값은"auto".

Option - height

이 옵션이 대화 상자의 높이를 설정하는 경우. 기본적으로 값은"auto". 이 옵션은 유형이 될 수 있습니다-

이것은 유형이 될 수 있습니다-

  • Number − 이것은 밀리 초 단위로 기간을 지정합니다.

  • String− 유일하게 지원되는 문자열 값은 자동 으로 내용에 따라 대화 상자 높이를 조정할 수 있습니다.

Syntax

$(".selector").dialog(
   { height: 400 }
);
9 숨는 장소

이 옵션은 대화 상자를 닫을 때 사용할 효과를 설정하는 데 사용됩니다. 기본적으로 값은null.

Option - hide

이 옵션은 대화 상자를 닫을 때 사용할 효과를 설정하는 데 사용됩니다. 기본적으로 값은null.

이것은 유형이 될 수 있습니다-

  • Boolean− 값은 true / false 일 수 있습니다 . false 이면 애니메이션이 사용되지 않고 대화 상자가 즉시 숨겨집니다. 경우 진정한 대화는 기본 기간 및 기본 완화와 페이드 아웃됩니다.

  • Number − 대화 상자는 지정된 지속 시간과 기본 여유로 페이드 아웃됩니다.

  • String− slideUp , fold 와 같은 지정된 효과를 사용하여 대화 상자가 숨겨집니다 .

  • Object− 값이 객체 인 경우 효과, 지연, 지속 시간 및 여유 속성을 제공하여 대화 상자를 숨길 수 있습니다.

    10

Syntax

$(".selector").dialog(
   { hide: { effect: "explode", duration: 1000 } }
);
11 maxHeight

이 옵션은 대화 상자의 크기를 조정할 수있는 최대 높이 (픽셀)를 설정합니다. 기본적으로 값은false.

Option - maxHeight

이 옵션은 대화 상자의 크기를 조정할 수있는 최대 높이 (픽셀)를 설정합니다. 기본적으로 값은false.

Syntax

$(".selector").dialog(
   { maxHeight: 600 }
);
12 maxWidth

이 옵션은 대화 상자의 크기를 조정할 수있는 최대 너비를 픽셀 단위로 설정합니다. 기본적으로 값은false.

Option - maxWidth

이 옵션은 대화 상자의 크기를 조정할 수있는 최대 너비를 픽셀 단위로 설정합니다. 기본적으로 값은false.

Syntax

$(".selector").dialog(
   { maxWidth: 600 }
);
13 minHeight

이 옵션은 대화 상자의 크기를 조정할 수있는 최소 높이 (픽셀)입니다. 기본적으로 값은150.

Option - minHeight

이 옵션은 대화 상자의 크기를 조정할 수있는 최소 높이 (픽셀)입니다. 기본적으로 값은150.

Syntax

$(".selector").dialog(
   { minHeight: 200 }
);
14 minWidth

이 옵션은 대화 상자의 크기를 조정할 수있는 최소 너비 (픽셀)입니다. 기본적으로 값은150.

Option - minWidth

이 옵션은 대화 상자의 크기를 조정할 수있는 최소 너비 (픽셀)입니다. 기본적으로 값은150.

Syntax

$(".selector").dialog(
   { minWidth: 200 }
);
15 모달

이 옵션이 다음으로 설정된 경우 true, 대화 상자는 모달 동작을 갖습니다. 페이지의 다른 항목은 비활성화됩니다. 즉, 상호 작용할 수 없습니다. 모달 대화 상자는 대화 상자 아래에 있지만 다른 페이지 요소 위에 오버레이를 만듭니다. 기본적으로 값은false.

Option - modal

이 옵션이 다음으로 설정된 경우 true, 대화 상자는 모달 동작을 갖습니다. 페이지의 다른 항목은 비활성화됩니다. 즉, 상호 작용할 수 없습니다. 모달 대화 상자는 대화 상자 아래에 있지만 다른 페이지 요소 위에 오버레이를 만듭니다. 기본적으로 값은false.

Syntax

$(".selector").dialog(
   { modal: true }
);
16 위치

이 옵션은 대화 상자의 초기 위치를 지정합니다. 미리 정의 된 위치 중 하나 일 수 있습니다 : 가운데 (기본값), 왼쪽, 오른쪽, 위쪽 또는 아래쪽 . 왼쪽 및 위쪽 값 (픽셀 단위)이 [left, top] 인 2 요소 배열 또는 [ 'right', 'top']과 같은 텍스트 위치 일 수도 있습니다. 기본적으로 값은{ my: "center", at: "center", of: window }.

Option - position

이 옵션은 대화 상자의 초기 위치를 지정합니다. 미리 정의 된 위치 중 하나 일 수 있습니다 : 가운데 (기본값), 왼쪽, 오른쪽, 위쪽 또는 아래쪽 . 왼쪽 및 위쪽 값 (픽셀 단위)이 [left, top] 인 2 요소 배열 또는 [ 'right', 'top']과 같은 텍스트 위치 일 수도 있습니다. 기본적으로 값은{ my: "center", at: "center", of: window }.

Syntax

$(".selector").dialog(
   { position: { my: "left top", at: "left bottom", of: button } }
);
17 크기 조정 가능

이 옵션은 false, 대화 상자는 모든 방향으로 크기를 조정할 수 있습니다. 기본적으로 값은true.

Option - resizable

이 옵션은 false, 대화 상자는 모든 방향으로 크기를 조정할 수 있습니다. 기본적으로 값은true.

Syntax

$(".selector").dialog(
   { resizable: false }
);
18 보여 주다

이 옵션은 대화 상자를 열 때 사용되는 효과입니다. 기본적으로 값은null.

Option - show

이 옵션은 대화 상자를 열 때 사용되는 효과입니다. 기본적으로 값은null.

이것은 유형이 될 수 있습니다-

  • Boolean− 값은 true / false 일 수 있습니다 . false 이면 애니메이션이 사용되지 않고 대화 상자가 즉시 표시됩니다. 경우 진정한 대화는 기본 기간 및 기본 완화에 사라질 것이다.

  • Number − 대화 상자는 지정된 지속 시간과 기본 여유로 페이드 인됩니다.

  • String− slideDown , fold 와 같은 지정된 효과를 사용하여 대화 상자가 표시됩니다 .

  • Object− 값이 객체 인 경우 효과, 지연, 지속 시간 및 여유 속성을 제공하여 대화 상자를 표시 할 수 있습니다.

    19

Syntax

$(".selector").dialog(
   { show: { effect: "blind", duration: 800 } }
);
20 표제

이 옵션은 대화 상자의 제목 표시 줄에 표시 할 텍스트를 지정합니다. 기본적으로 값은null.

Option - title

이 옵션은 대화 상자의 제목 표시 줄에 표시 할 텍스트를 지정합니다. 기본적으로 값은null.

Syntax

$(".selector").dialog(
   { title: "Dialog Title" }
);
21 폭

이 옵션은 대화 상자의 너비를 픽셀 단위로 지정합니다. 기본적으로 값은300.

Option - width

이 옵션은 대화 상자의 너비를 픽셀 단위로 지정합니다. 기본적으로 값은300.

Syntax

$(".selector").dialog(
   { width: 500 }
);

다음 섹션에서는 대화 상자 기능의 몇 가지 작동 예를 보여줍니다.

기본 기능

다음 예는 매개 변수를 전달하지 않는 대화 상자 기능의 간단한 예를 보여줍니다. dialog() 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-1" ).dialog({
               autoOpen: false,  
            });
            $( "#opener" ).click(function() {
               $( "#dialog-1" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-1" 
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener">Open Dialog</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

버튼, 제목 및 위치 사용

다음 예제는 세 가지 옵션의 사용법을 보여줍니다. buttons, title 과 position JqueryUI의 대화 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-2" ).dialog({
               autoOpen: false, 
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
               title: "Success",
               position: {
                  my: "left center",
                  at: "left center"
               }
            });
            $( "#opener-2" ).click(function() {
               $( "#dialog-2" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-2"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-2">Open Dialog</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

숨기기, 표시 및 높이 사용

다음 예제는 세 가지 옵션의 사용법을 보여줍니다. hide, show 과 height JqueryUI의 대화 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-3" ).dialog({
               autoOpen: false, 
               hide: "puff",
               show : "slide",
               height: 200      
            });
            $( "#opener-3" ).click(function() {
               $( "#dialog-3" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-3"
         title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-3">Open Dialog</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

모달 사용

다음 예제는 세 가지 옵션의 사용법을 보여줍니다. buttons, title 과 position JqueryUI의 대화 위젯에서.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#dialog-4" ).dialog({
               autoOpen: false, 
               modal: true,
               buttons: {
                  OK: function() {$(this).dialog("close");}
               },
            });
            $( "#opener-4" ).click(function() {
               $( "#dialog-4" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <div id = "dialog-4" title = "Dialog Title goes here...">This my first jQuery UI Dialog!</div>
      <button id = "opener-4">Open Dialog</button>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt 
         ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
         laboris nisi ut aliquip ex ea commodo consequat.
      </p>
      <label for = "textbox">Enter Name: </label>
      <input type = "text">
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htmjavascript를 지원하는 표준 브라우저에서 열면 다음 출력도 표시되어야합니다. 이제 결과를 가지고 놀 수 있습니다.

$ (selector, context) .dialog ( "action", [params]) 메서드

대화 (액션, PARAMS) 방법은 상자를 폐쇄로, 대화 상자에 대한 작업을 수행 할 수있다. 그만큼action 첫 번째 인수에 문자열로 지정되고 선택적으로 하나 이상의 params 주어진 행동에 따라 제공 될 수 있습니다.

기본적으로 여기서 액션은 아무것도 아니지만 문자열 형태로 사용할 수있는 jQuery 메서드입니다.

통사론

$(selector, context).dialog ("action", [params]);

다음 표는이 방법에 대한 작업을 나열합니다.

Sr. 아니. 액션 및 설명
1 닫기()

이 작업은 대화 상자를 닫습니다. 이 메서드는 인수를 허용하지 않습니다.

Action - close()

이 작업은 대화 상자를 닫습니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("close");
2 멸하다()

이 작업은 대화 상자를 완전히 제거합니다. 이렇게하면 요소가 다시 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Action - destroy()

이 작업은 대화 상자를 완전히 제거합니다. 이렇게하면 요소가 다시 초기화 이전 상태로 돌아갑니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("destroy");
삼 isOpen ()

이 작업은 대화 상자가 열려 있는지 확인합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - isOpen()

이 작업은 대화 상자가 열려 있는지 확인합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("isOpen");
4 moveToTop ()

이 작업은 해당 대화 상자를 전경 (다른 것 위에)으로 배치합니다. 이 메서드는 인수를 허용하지 않습니다.

Action - moveToTop()

이 작업은 해당 대화 상자를 전경 (다른 것 위에)으로 배치합니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("moveToTop");
5 열다()

이 작업은 대화 상자를 엽니 다. 이 메서드는 인수를 허용하지 않습니다.

Action - open()

이 작업은 대화 상자를 엽니 다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("open");
6 옵션 (optionName)

이 조치는 현재 지정된 optionName과 연관된 값을 가져옵니다. 여기서 optionName 은 가져올 옵션의 이름입니다.

Action - option( optionName )

이 조치는 현재 지정된 optionName과 연관된 값을 가져옵니다. 여기서 optionName 은 가져올 옵션의 이름입니다.

Syntax

var isDisabled = $( ".selector" ).dialog( "option", "disabled" );
7 선택권()

이 작업은 현재 대화 상자 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 개체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Action - option()

이 작업은 현재 대화 상자 옵션 해시를 나타내는 키 / 값 쌍을 포함하는 개체를 가져옵니다. 이 메서드는 인수를 허용하지 않습니다.

Syntax

var options = $( ".selector" ).dialog( "option" );
8 옵션 (optionName, value)

이 조치는 지정된 optionName과 연관된 대화 상자 옵션의 값을 설정합니다.

Action - option( optionName, value )

이 조치는 지정된 optionName과 연관된 대화 상자 옵션의 값을 설정합니다.

Syntax

$(".selector").dialog( "option", "disabled", true );
9 옵션 (옵션)

이 작업은 대화 상자에 대한 하나 이상의 옵션을 설정합니다.

Action - option( options )

이 작업은 대화 상자에 대한 하나 이상의 옵션을 설정합니다.

Syntax

$(".selector").dialog( "option", { disabled: true });
10 위젯 ()

이 작업은 대화 상자의 위젯 요소를 반환합니다. ui-dialog 클래스 이름으로 주석이 달린 요소. 이 메서드는 인수를 허용하지 않습니다.

Action - widget()

이 작업은 대화 상자의 위젯 요소를 반환합니다. ui-dialog 클래스 이름으로 주석이 달린 요소. 이 메서드는 인수를 허용하지 않습니다.

Syntax

$(".selector").dialog("widget");

예

이제 위 표의 작업을 사용한 예를 살펴 보겠습니다. 다음 예제는 isOpen () , open () 및 close () 메서드 의 사용을 보여줍니다 .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $("#toggle").click(function() {
               ($("#dialog-5").dialog("isOpen") == false) ? $(
                  "#dialog-5").dialog("open") : $("#dialog-5").dialog("close") ;
            });
            $("#dialog-5").dialog({autoOpen: false});
         });
      </script>
   </head>
   
   <body>
      <button id = "toggle">Toggle dialog!</button>
      <div id = "dialog-5" title = "Dialog Title!">
         Click on the Toggle button to open and close this dialog box.
      </div>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

대화 상자에서 이벤트 관리

이전 섹션에서 본 대화 (옵션) 메소드 외에도 JqueryUI는 특정 이벤트에 대해 트리거되는 이벤트 메소드를 제공합니다. 이러한 이벤트 방법은 다음과 같습니다.

Sr. 아니. 이벤트 방법 및 설명
1 beforeClose (이벤트, UI)

이 이벤트는 대화 상자가 닫히려고 할 때 트리거됩니다. false를 반환 하면 대화 상자가 닫히지 않습니다. 유효성 검사에 실패한 양식이있는 대화 상자에 유용합니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - beforeClose(event, ui)

이 이벤트는 대화 상자가 닫히려고 할 때 트리거됩니다. false를 반환 하면 대화 상자가 닫히지 않습니다. 유효성 검사에 실패한 양식이있는 대화 상자에 유용합니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").dialog (
   beforeClose: function(event, ui) {}
);
2 닫기 (이벤트, UI)

이 이벤트는 대화 상자가 닫힐 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - close(event, ui)

이 이벤트는 대화 상자가 닫힐 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").dialog (
   close: function(event, ui) {}
);
삼 생성 (이벤트, UI)

이 이벤트는 대화 상자가 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - create(event, ui)

이 이벤트는 대화 상자가 생성 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").dialog (
   create: function(event, ui) {}
);
4 드래그 (이벤트, UI)

이 이벤트는 드래그하는 동안 대화 상자가 움직일 때 반복적으로 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - drag(event, ui)

이 이벤트는 드래그하는 동안 대화 상자가 움직일 때 반복적으로 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • offset − 대화 상자의 현재 오프셋 위치를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   drag: function(event, ui) {}
);
5 dragStart (이벤트, UI)

이 이벤트는 제목 표시 줄을 드래그하여 대화 상자의 위치 변경이 시작될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - dragStart(event, ui)

이 이벤트는 제목 표시 줄을 드래그하여 대화 상자의 위치 변경이 시작될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • offset − 대화 상자의 현재 오프셋 위치를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   dragStart: function(event, ui) {}
);
6 dragStop (이벤트, UI)

이 이벤트는 드래그 작업이 종료 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - dragStop(event, ui)

이 이벤트는 드래그 작업이 종료 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. UI의 가능한 값 은-

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • offset − 대화 상자의 현재 오프셋 위치를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   dragStop: function(event, ui) {}
);
7 포커스 (이벤트, UI)

이 이벤트는 대화 상자가 포커스를받을 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - focus(event, ui)

이 이벤트는 대화 상자가 포커스를받을 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").dialog (
   focus: function(event, ui) {}
);
8 열기 (이벤트, UI)

이 이벤트는 대화 상자가 열릴 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - open(event, ui)

이 이벤트는 대화 상자가 열릴 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Syntax

$(".selector").dialog (
   open: function(event, ui) {}
);
9 크기 조정 (이벤트, UI)

이 이벤트는 대화 상자의 크기가 조정될 때 반복적으로 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - resize(event, ui)

이 이벤트는 대화 상자의 크기가 조정될 때 반복적으로 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. ui의 가능한 값은 다음과 같습니다.

  • originalPosition − 크기를 조정하기 전에 대화 상자의 CSS 위치를 나타내는 jQuery 객체.

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • originalSize − 크기를 조정하기 전에 대화 상자의 크기를 나타내는 jQuery 객체.

  • size − 대화 상자의 현재 크기를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   resize: function(event, ui) {}
);
10 resizeStart (이벤트, UI)

이 이벤트는 대화 상자의 크기 조정이 시작될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - resizeStart(event, ui)

이 이벤트는 대화 상자의 크기 조정이 시작될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. ui의 가능한 값은 다음과 같습니다.

  • originalPosition − 크기를 조정하기 전에 대화 상자의 CSS 위치를 나타내는 jQuery 객체.

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • originalSize − 크기를 조정하기 전에 대화 상자의 크기를 나타내는 jQuery 객체.

  • size − 대화 상자의 현재 크기를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   resizeStart: function(event, ui) {}
);
11 resizeStop (이벤트, UI)

이 이벤트는 대화 상자의 크기 조정이 종료 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다.

Event - resizeStop(event, ui)

이 이벤트는 대화 상자의 크기 조정이 종료 될 때 트리거됩니다. 여기서 event 는 Event 유형 이고 ui 는 Object 유형 입니다. ui의 가능한 값은 다음과 같습니다.

  • originalPosition − 크기를 조정하기 전에 대화 상자의 CSS 위치를 나타내는 jQuery 객체.

  • position − 대화 상자의 현재 CSS 위치를 나타내는 jQuery 객체.

  • originalSize − 크기를 조정하기 전에 대화 상자의 크기를 나타내는 jQuery 객체.

  • size − 대화 상자의 현재 크기를 나타내는 jQuery 객체.

Syntax

$(".selector").dialog (
   resizeStop: function(event, ui) {}
);

다음 예제는 위의 표에 나열된 이벤트의 사용을 보여줍니다.

beforeClose 이벤트 메소드 사용

다음 예제는 beforeClose 이벤트 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
         .invalid { color: red; }
         textarea {
            display: inline-block;
            width: 100%;
            margin-bottom: 10px;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-6" ).dialog({
	       autoOpen: false, 
               buttons: {
                  OK: function() {
                     $( this ).dialog( "close" );
                  }
               },
               beforeClose: function( event, ui ) {
                  if ( !$( "#terms" ).prop( "checked" ) ) {
                     event.preventDefault();
                     $( "[for = terms]" ).addClass( "invalid" );
                  }
               },
               width: 600
            });
            $( "#opener-5" ).click(function() {
               $( "#dialog-6" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-6">
         <p>You must accept these terms before continuing.</p>
         <textarea>This Agreement and the Request constitute the entire agreement of the 
         parties with respect to the subject matter of the Request. This Agreement shall be 
         governed by and construed in accordance with the laws of the State, without giving 
         effect to principles of conflicts of law.</textarea>
         <div>
            <label for = "terms">I accept the terms</label>
            <input type = "checkbox" id = "terms">
         </div>
      </div>
      <button id = "opener-5">Open Dialog</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

크기 조정 이벤트 방법 사용

다음 예제는 resize 이벤트 방법.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Dialog functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- CSS -->
      <style>
         .ui-widget-header,.ui-state-default, ui-button {
            background:#b9cd6d;
            border: 1px solid #b9cd6d;
            color: #FFFFFF;
            font-weight: bold;
         }
      </style>
      
      <!-- Javascript -->
      <script type = "text/javascript">
         $(function() {
            $( "#dialog-7" ).dialog({
               autoOpen: false, 
               resize: function( event, ui ) {
                  $( this ).dialog( "option", "title",
	         ui.size.height + " x " + ui.size.width );
               }
            });
            $( "#opener-6" ).click(function() {
               $( "#dialog-7" ).dialog( "open" );
            });
         });
      </script>
   </head>
   
   <body>
      <div id = "dialog-7" title = "Dialog Title goes here..."
         >Resize this dialog to see the dialog co-ordinates in the title!</div>
      <button id = "opener-6">Open Dialog</button>
   </body>
</html>

위 코드를 HTML 파일에 저장하겠습니다. dialogexample.htm 자바 스크립트를 지원하는 표준 브라우저에서 열면 다음 출력이 표시되어야합니다.

확장 점

대화 위젯은 위젯 팩토리로 빌드되며 확장 할 수 있습니다. 위젯을 확장하려면 기존 메서드의 동작을 재정의하거나 추가 할 수 있습니다. 다음 메소드는 대화 메소드와 동일한 API 안정성을 가진 확장 점으로 제공됩니다. 위의 표에 나열되어 있습니다.

Sr. 아니. 방법 및 설명
1 _allowInteraction (이벤트)

이 메서드를 사용하면 대화 상자의 자식이 아니지만 사용자가 사용할 수 있도록 허용하는 요소를 화이트리스트에 추가하여 사용자가 주어진 대상 요소와 상호 작용할 수 있습니다. 여기서 event 는 Event 유형 입니다.

Extension Point - allowInteraction(event, ui)

이 메서드를 사용하면 대화 상자의 자식이 아니지만 사용자가 사용할 수 있도록 허용하는 요소를 화이트리스트에 추가하여 사용자가 주어진 대상 요소와 상호 작용할 수 있습니다. 여기서 event 는 Event 유형 입니다.

Code Example

_allowInteraction: function( event ) {
  return !!$( event.target ).is( ".select2-input" ) || this._super( event );
}

  • Select2 플러그인은 모달 대화 상자에서 사용됩니다.

  • super () 호출은 대화 상자 내의 요소가 계속 상호 작용할 수 있도록합니다.
jQuery UI 위젯 팩토리는 모든 jQuery UI 위젯이 빌드되는 확장 가능한 기반입니다. 위젯 팩토리를 사용하여 플러그인을 빌드하면 상태 관리를위한 편리함은 물론 플러그인 메소드 노출 및 인스턴스화 후 옵션 변경과 같은 일반적인 작업에 대한 규칙을 제공합니다.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved