"JQuery UI 다이얼로그"의 두 판 사이의 차이

2019년 7월 17일 (수) 18:01 판

1 개요

jQuery UI dialog
jQuery UI 다이얼로그, 대화상자

<source lang='html5'> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> <script> $(function() { $('#dialog').dialog({ autoOpen: false, resizable: false, buttons: [ { text: "OK", click: function() { console.log("You pressed OK!"); $(this).dialog("close"); } }, { text: "Cancel", click: function() { console.log("You pressed Cancel!"); $(this).dialog("close"); } }, { text: "zzz", click: function() { console.log("You pressed Cancel!"); $(this).dialog("close"); } } ] }); $('#button_open_dialog').click( function(){ $('#dialog').dialog('open'); }); }); </script>

아무 것도 하지 않을 것입니다. 동의하십니까?

2 같이 보기

3 참고

@@ 5번째 줄: / 5번째 줄: @@
 <source lang='html5'>
-<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
+<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
-<script src="//code.jquery.com/jquery.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
-<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
 <script>
 $(function() {
-  $('#dialog').dialog({
+	$('#dialog').dialog({
-    autoOpen: false,
+		autoOpen: false,
-    resizable: false,
+		resizable: false,
-  });
+		buttons: [
-  $('#button_open_dialog').click( function(){
+			{
-    $('#dialog').dialog('open');
+				text: "OK",
-  });
+				click: function() {
+					console.log("You pressed OK!");
+					$(this).dialog("close");
+				}
+			},
+			{
+				text: "Cancel",
+				click: function() {
+					console.log("You pressed Cancel!");
+					$(this).dialog("close");
+				}
+			},
+{
+				text: "zzz",
+				click: function() {
+					console.log("You pressed Cancel!");
+					$(this).dialog("close");
+				}
+			}
+		]
+	});
+	$('#button_open_dialog').click( function(){
+		$('#dialog').dialog('open');
+	});
 });
 </script>
-<button id='button_open_dialog'>대화상자 열기</button>
+<button id='button_open_dialog'>확인상자 열기</button>
-<div id="dialog" title="기본 대화상자">
+<div id="dialog" title="확인상자">
-   <p>이것은 기본 대화상자 입니다. 이동하거나 닫을 수 있습니다.</p>
+   <p>아무 것도 하지 않을 것입니다. 동의하십니까?</p>
 </div>
-</source>
-<jsfiddle height='200'>nqg3zzsd</jsfiddle>
 ==같이 보기==