$('#dialogDiv').dialog(
{
hide:true, //숨기려면 클릭하세요. 이를 추가하지 않으면 팝업창을 닫은 후 다시 클릭하면 오류가 발생합니다.
autoOpen:false,
height:380,
width:800,
modal:true, //마스크 레이어(팝업은 페이지 크기에 영향을 미칩니다)
title:'Bid Opener',
overlay: {opacity : 0.5, background: "black" ,overflow:'auto'} ,
버튼:{
'OK':function(){
// 처리 방법 addUser()
},
'취소':function(){
// 현재 대화 상자 닫기
$(this).dialog("close")
}
}
}
) ;
$('#addItems').click(function( ){
loadPage('buildOpeningGroupAddOpering.htm','#dialogDiv'); //대화상자 메모리 페이지
//$(window.parent .document).find("#projectSpaceContent .show").height( 600)//현재 Iframe 높이 조정
$('#dialogDiv').data('title.dialog', '입찰자 추가'). Dialog('open'); //제목 수정
return false;
})
function loadPage(path,id) {
$.get(path, function(data) {
// data = data.replace(//ig,"") //스크립트 태그 제거
data = data.replace(/< ;/?link.*>/ig,""); //링크 태그 제거
data = data.replace(//ig,""); tag
data = data.replace(/< /?body.*>/ig,""); //본문 태그 제거
data = data.replace(/data = data.replace(//ig,"") //doctype 태그 제거
data = data.replace(/.*/ig,""); //제목 태그 제거
$(id).empty().html(data);// contentMain 콘텐츠 지우고 html 로드
});
}
//팝업 레이어에 닫기 버튼 추가
$('.ui-dialog-buttonpane').show().empty( );
$('').click(function(){
$("#dialogDiv").dialog('close');
return false;
}).appendTo('.ui-dialog-buttonpane');
먼저 예제를 살펴보겠습니다. 또한, 대화 상자의 크기를 드래그하여 변경하려면 ui.draggble.js 및 ui.ressible.js를 추가해야 합니다.
text/css" href="http ://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script> <br>$("#dialog").dialog({autoOpen:false,buttons:{"OK":function(){$(this ).dialog("close") ;}},closeOnEscape:true,hide:"slide",modal:true,title:"dialog"}).dialog("open") <br></script> 🎜>
< div id="dialog" title="대화 제목">당신은 돼지입니다!
1 속성
1.11 autoOpen, 이 속성이 true이면 대화 상자가 호출될 때 대화 상자 창이 자동으로 열립니다. 속성이 false이면 처음에는 창이 숨겨지고 .dialog("open")에 도달할 때까지 대화 상자 창이 팝업되지 않습니다. 기본값: 참.
1.12 초기화 예: $('.selector')는 대화 상자의 클래스 이름임을 참고하세요. 이 예에서 .selector=#dialog는 다시 설명하지 않습니다.
$('.selector').dialog({ autoOpen: false });
1.13 초기화 후 다음 속성을 가져오고 설정합니다. 예:
//Get
var autoOpen = $('. selector').dialog('option', 'autoOpen');
//설정
$('.selector').dialog('option', 'autoOpen', false)
1.21 bgiframe의 기본값은 false입니다. true인 경우 bgiframe 플러그인이 사용되어 bgiframe 플러그인을 포함하여 zIndex에 관계없이 선택 상자가 다른 요소 위에 표시되는 문제를 해결합니다.
IE6에서는 뒷면의 회색 화면이 선택 영역을 덮도록 합니다.
1.22 초기화 예:
$('.selector').dialog({ bgiframe: true })
1.23 초기화 후 가져오기 및 설정:
//Get
var bgiframe = $('.selector').dialog('option', 'bgiframe');
//설정
$('.selector').dialog('option', 'bgiframe', true)
1.31 버튼 버튼을 표시하고, 버튼의 텍스트를 쓰고, 버튼 클릭 기능을 설정합니다. 기본값은 {}이며 버튼이 없습니다.
버튼 속성은 위의 예에서 이미 사용되었습니다. 주의하세요.
1.32 초기화 예:
$('.selector').dialog({ 버튼: { "Ok": function() { $(this).dialog("close"); } } }); 🎜>1.33 초기화 후 가져오기 및 설정:
//Get
varbuttons = $('.selector').dialog('option', 'buttons')
//Set
$('.selector').dialog('option', 'buttons', { "확인": function() { $(this).dialog("close"); } }); closeOnEscape가 true이면 키보드의 ESC 키를 클릭하여 대화 상자를 닫습니다.
1.42 초기화 예:
$('.selector').dialog({ closeOnEscape: false }); 🎜>1.43 초기화 후 가져오기 및 설정:
//Get
var closeOnEscape = $('.selector').dialog('option', 'closeOnEscape')
//Set
$('.selector ').dialog('option', 'closeOnEscape', false);
1.51DialogClass 유형이 대화 상자에 추가되며 기본값은 비어 있습니다.
1.52 초기화 예:
$ ('.selector' ).dialog({DialogClass: 'alert' });
1.53 초기화 후 가져오기 및 설정:
//Get
varDialogClass = $('.selector').dialog ('option', 'dialogClass')
//Set
$('.selector').dialog('option', 'dialogClass', 'alert')
1.61 드래그 가능 , 크기 조정 가능: 드래그 가능 여부 제목 헤더를 사용하여 드래그할 수 있으며 기본값은 true이며, 크기 조정 가능 여부는 대화 상자의 크기를 변경할 수 있으며 기본값은 true이며 크기를 변경할 수 있습니다.
1.62 초기화 예:
$('.selector').dialog({ draggable: false,resizing:false })
1.63 초기화 후 가져오기 및 설정:
//Get
var draggable = $('.selector').dialog('option', 'draggable');
//설정
$('.selector').dialog('option', 'draggable', false);
1.71 너비, 높이, 대화상자의 너비 및 높이, 기본값은 자동, 자동입니다.
1.72 초기화 예:
$('.selector').dialog({ height: 530,width:200 })
1.73 초기화 후 get 및 set: 1.63을 참고하세요
1.81 maxWidth, maxHeight, minWidth, minHeight, 대화 상자가 변경할 수 있는 최대 너비, 최대 높이, 최소 너비 및 최소 높이. maxWidth 및 maxHeight의 기본값은 무제한인 false입니다. minWidth 및 minHeight의 기본값은 150입니다. 이러한 속성을 사용하려면 ui.ressible.js 지원이 필요합니다.
1.82 초기화 예:
$('.selector').dialog({ maxHeight: 400,maxWidth:600,minHeight:300,minWidth:300 })
1.83 초기화 후 다음을 가져오고 설정합니다. 1.63
1.91 숨기기, 표시, 대화 상자를 닫고 열 때 효과를 참조하세요. 기본값은 null이며 효과가 없습니다.
1.92 초기화 예: 위 예에 사용된 내용은 직접 확인하세요.
1.93 초기화 후 get 및 set: 1.63
1.101 모달을 참조하세요. 모달 창 사용 여부는 모달 창을 연 후에는 모달 창까지 페이지의 다른 요소를 클릭할 수 없습니다. 폐쇄되었습니다. 창을 모달하지 않으려면 기본값은 false입니다.
1.102 초기화 예: $('.selector').dialog({ modal: true });
1.103 초기화 후 get 및 set: 1.63
1.111 제목을 참조하세요. 대화 상자 텍스트의 기본적으로 비어 있습니다.
1.112 초기화 예시: 상단 예시를 참고하세요. 1.113 초기화 후 가져오기 및 설정: 1.63
1.121 위치를 참조하세요. 대화 상자 표시 위치는 '가운데', '왼쪽', '오른쪽', '상단', '하단'일 수 있습니다. 또는 위쪽과 왼쪽의 오프셋은 ['right', 'top']과 같은 문자열 배열일 수도 있습니다.
1.122 초기화 예시: $('.selector').dialog({ position: ['top','right'] }) 1.123 초기화 후 get 및 set: 1.63을 참고하세요
1.131 zIndex, 대화 상자의 zindex 값, 기본값은 1000입니다.
1.132 초기화 예: $('.selector').dialog({ zIndex: 3999 }) 1.133 초기화 후 가져오기 및 설정: 참조하세요. 1.63
1.141 스택의 기본값은 true입니다. 대화 상자에 포커스가 있으면 대화 상자가 맨 위에 표시됩니다.
1.142 초기화 예: $('.selector').dialog({ stack: false }) 1.143 초기화 후 get 및 set: 1.63
2 이벤트
2.11 beforeclose 유형을 참조하세요. Dialogbeforeclose, 이 이벤트는 대화 상자를 닫으려고 할 때 트리거됩니다. false가 반환되면 닫기가 차단됩니다.
2.12 초기화 예: $('.selector').dialog({
beforeclose: function(event, ui) { ... }
})
2.13 이 이벤트를 바인딩하려면 유형을 사용하세요. 예: $('.selector').bind('dialogbeforeclose', function(event, ui) {
...
})
2.21 닫기 유형: 대화 상자 닫기, 대화 상자가 열릴 때 is 이 이벤트는 종료 후에 트리거됩니다.
2.22 초기화 예: $('.selector').dialog({
close: function(event, ui) { ... }
})
2.23 이 이벤트를 바인딩하려면 유형을 사용하세요. 예: $('.selector').bind('dialogclose', function(event, ui) {
...
})
2.3 열기 유형:Dialogopen, 대화 상자가 열릴 때 다음과 같은 경우에 트리거됩니다. (공간이 협소하여 생략해야 할 내용은 생략하겠습니다. 초기화 예시와 타입 바인딩 이벤트 활용법을 참고하시면 됩니다.)
2.4 포커스 유형: 대화 포커스, 대화 상자가 포커스를 얻을 때 트리거됩니다.
2.5 dragStart 유형: dragStart, 대화상자 드래그가 시작될 때 트리거됩니다.
2.6 드래그 유형: 드래그, 대화상자를 드래그할 때 트리거됩니다.
2.7 dragStop 유형: dragStop, 대화 상자 드래그가 완료되면 트리거됩니다.
2.8 resizeStart 유형: resizeStart, 대화 상자가 양식의 크기를 변경하기 시작할 때 트리거됩니다.
2.9 크기 조정 유형: 크기 조정, 대화 상자 크기가 조정될 때 트리거됩니다.
2.10 resizeStop 유형: resizeStop, 크기가 변경되면 트리거됩니다.
3가지 방법
3.1 파괴, 이게 좋아, 지구를 파괴해. . . 예: .dialog( 'destroy' )
3.2 비활성화, 대화 상자를 사용할 수 없습니다. 예: .dialog('disable')
3.3 활성화, 대화 상자를 사용할 수 있습니다. 예: 3.2
3.4 닫기, 열기, 닫기 및 대화 상자 열기
3.5 옵션, 대화 상자 속성을 설정하고 가져오기(예: .dialog('option', optionName, [value])), 값이 없으면 가져옵니다.
3.6 isOpen, 대화 상자가 열려 있으면 true를 반환합니다. 예: .dialog('isOpen')
3.7 moveToTop, 대화 상자를 맨 위로 이동합니다. 예: .dialog( 'moveToTop' )
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
