jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다.

주요 매개변수
jQuery UI 대화상자에서 일반적으로 사용되는 매개변수는 다음과 같습니다.

1. autoOpen: 기본값은 true입니다. 즉, 대화상자 메서드가 생성될 때 대화상자가 표시됩니다.
2. 기본적으로 표시할 버튼을 설정하는 데 사용되며 JSON 또는 배열 형식일 수 있습니다.
{"OK": function(){}, "Cancel": function(){}}
[{text : "OK", 클릭: function(){} },{text:"Cancel",click:function(){}}]
3. modal: 기본값은 false이며, 대화 상자가 모달인지 여부. true, 페이지의 다른 요소를 덮기 위해 마스크 레이어가 생성됩니다.
4. 제목: 제목
5. 드래그 가능: 수동으로 수행할 수 있는지 여부, 기본값은 true
6. 크기 조정 가능, 기본값 true
7. 너비: 너비, 기본값 300
8. 높이: 높이, 기본값 "auto"
덜 일반적으로 사용되는 기타 매개변수:

1. closeOnEscape: 기본값 true, Esc 키를 눌러 대화 상자를 닫습니다
2. show: 대화 상자 애니메이션 효과 열기
3. hide: 대화 상자를 닫는 애니메이션 효과
4. position: 대화 상자가 있는 위치 대화 상자가 표시되고 기본값은 "center"이며 문자열이나 배열로 설정할 수 있습니다:
'center', ' left', 'right', 'top', 'bottom'
['right ','top'], 위의 문자열 조합(x, y)
[350,100], 절대 수치(x,y)
5. minWidth: 기본값 150, 최소 너비
6. minHeight : 기본값 150, 최소 높이
사용법:

코드 복사 코드는 다음과 같습니다.

$("...").dialog({
title: "제목",
//. ..추가 매개변수
})

메인 method
jQuery UI Dialog는 대화 상자를 제어하는 ​​몇 가지 메서드를 제공하며 일반적으로 사용되는 메서드만 나열합니다.

open: 대화 상자를 엽니다.
close: 대화 상자를 닫습니다. 닫기로 소멸되며 계속 사용할 수 있음)
destroy : 대화상자를 소멸
옵션 : 매개변수 설정, 즉 이전에 나열된 매개변수
사용 대화상자 메소드의 매개변수로 사용하는 경우 :

코드 복사 코드는 다음과 같습니다.

var dlg = $ ("...") .dialog({
//...다양한 매개변수
});
dlg.dialog("option", { title: "title" }) // 매개변수 설정
dlg.dialog ("open"); // open 메소드를 사용하여 대화 상자 열기

주요 이벤트
jQuery UI 대화 상자는 대화 상자 열기 및 닫기와 같은 몇 가지 추가 작업을 제공합니다. :

open: 열 때
close: 닫을 때
create: 생성 시
resize: 크기 조정 시
drag: 드래그 시
사용 방법은 와 동일합니다. 열 때 닫기 버튼 숨기기 등의 매개변수 사용법:

코드 복사 코드는 다음과 같습니다.

$("...").dialog({
//...다양한 매개변수
open: function(event, ui) {
$(".ui-dialog -titlebar -close", $(this).parent()).hide();
}
});

특정 용도
다음은 일반적으로 사용되는 프롬프트 정보를 요약한 것입니다. , 추가 설명 없음:

코드 복사 코드는 다음과 같습니다.

jQuery.extend(jQuery, {
// jQuery UI 경고 팝업 프롬프트
jqalert: function(text, title, fn) {
var html =
'< ;div class="dialog" id="dialog-message">'
'

'
' ' 텍스트
'

'
'

';
return $(html) .dialog({
//autoOpen: false,
크기 조정 가능: false,
모달: true,
표시: {
효과: '페이드',
기간: 300
} ,
title: title || "프롬프트 메시지",
버튼: {
"OK": function() {
var dlg = $(this).dialog("close") ;
fn && fn.call(dlg);
}
}
})
},
// jQuery UI 경고가 팝업되고 일정 간격 후에 자동으로 종료됩니다. 🎜>jqtimeralert : function(text, title, fn, timeMax) {
var dd = $(
'

'
' < ;p> '
' ' 🎜>'

'
'

')
dd[0].timerMax || 3
return dd.dialog({
// autoOpen: false ,
크기 조정 가능: false,
모달: true,
표시: {
효과: 'fade',
기간: 300
},
open: 기능 (e, ui) {
var me = this,
dlg = $(this),
btn = dlg.parent().find(".ui-button-text").text(" OK(" me.timerMax ")");
--me.timerMax;
me.timer = window.setInterval(function() {
btn.text("OK(" me.timerMax ") )") ;
if (me.timerMax-- <= 0) {
dlg.dialog("close");
fn && fn.call(dlg);
window.clearInterval (me.timer); // 시간이 되면 타이머 지우기
}
}, 1000)
},
title: title || "프롬프트 메시지",
buttons:
" 확인": function() {
var dlg = $(this).dialog("close")
fn && fn.call(dlg)
window.clearInterval(this. 타이머); / / 타이머 지우기
}
},
close: function() {
window.clearInterval(this.timer) // 타이머 지우기
}
}) ;
},
// jQuery UI 확인이 확인 프롬프트를 표시합니다.
jqconfirm: function(text, title, fn1, fn2) {
var html =
'

'
'

'
' ' 텍스트
'

'
'

';
return $(html).dialog({
//autoOpen : false,
크기 조정 가능: false,
모달: true,
표시: {
효과: '페이드',
기간: 300
},
제목: 제목 | "프롬프트 메시지",
버튼: {
"확인": function() {
var dlg = $(this).dialog("close")
fn1 && fn1.call( dlg, true);
},
"취소": function() {
var dlg = $(this).dialog("close"); dlg, false) ;
}
}
})
},
// iframe 창에 jQuery UI 팝업
jqopen: function(url, options) {
var html =
'

'
' '
'

'
반환 $( html).dialog( $.extend({
modal: true,
closeOnEscape: false,
draggable: false,
resizing: false,
close: function(event, ui) {
$( this).dialog("destroy"); // 닫을 때 삭제됨
}
}, options))
},
// jQuery UI 확인 프롬프트
확인: 함수(evt , 텍스트, 제목) {
evt = $.event.fix(evt);
var me = evt.target;
if (me.confirmResult) {
me. verifyResult = false;
return true;
}
jQuery.jqconfirm(text, title, function(e) {
me.confirmResult = true;
if (e) {
if (me.href && $.trim(me.href).indexOf("javascript:") == 0) {
$.globalEval(me.href)
me.confirmResult = false; >return;
}
var t = me.type && me.type.toLowerCase()
if (t && me.name && (t == "image" || t == "제출) " || t = = "버튼")) {
__doPostBack(me.name, "");
me.confirmResult = false;
return;
}
if (me. 클릭) me.click(evt);
return false
})

}); 위 코드에는 또 다른 문제가 있습니다. 문제는 팝업 상자를 닫을 때마다 소멸되지 않는다는 것입니다.

해결책은 다음과 같습니다(구체적인 시연 없음).

종료 이벤트 시 삭제
경고/확인 공급자의 대화 상자 인스턴스를 정적으로 설정
외부적으로 호출할 때 단일 사용 대화 상자 인스턴스
데모 프로그램

html 코드는 다음과 같습니다.




코드 복사


코드는 다음과 같습니다.

🎜 >
해당 js 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$(function () {

$("#button1").click(function() {
$.jqalert("일반적인 프롬프트입니다!");
});
$("#button2 ").click(function() {
$.jqtimeralert("자동 종료 프롬프트입니다!", "자동 종료 프롬프트",
function() {
$.jqalert("시간이 다 되었습니다" )
});
})
$("#button3").click(function() {
$.jqconfirm("당신은? 이 작업을 수행하시겠습니까?", "확인 프롬프트",
function() {
$.jqalert("확인을 클릭하세요");
},
function() {
$ .jqalert("취소 클릭");
});
$("#button4").click(function(e) {
if ($.confirm(e, "이 작업을 수행하시겠습니까?"))
$.jqalert("확인을 클릭하세요.")
})
$("#button5").click(function(e) {
$.jqopen("http:// lwme.cnblogs.com/", { 제목: "내 블로그", 너비: 700, 높이: 500 })
});


서버의 경우 최종 제어에서 확인을 사용하려면 다음 방법이 필요할 수 있습니다.

코드 복사

코드는 다음과 같습니다. $( "#button4").click(function(e) { if (!$.confirm(e, "하시겠습니까? 이거 하려고?" ")) {

e.stopPropagation();

return false;
}
});


또한 jQuery UI에서 사용하는 글꼴은 다음과 같습니다. 일반 사용 중에 대화 상자가 더 커질 수 있습니다.

코드 복사

코드 다음과 같습니다: body { 글꼴 크기: 12px; } //기본 글꼴 크기/*jQuery UI 가짜*/

.ui-widget { 글꼴 크기: 1em; }

.ui-dialog .ui-dialog-buttonpane { padding-top: .1em; padding-bottom: .1em; }


이런 식으로 대화상자의 크기는 다음과 같습니다.
asp.net ajax용 Telerik RadControls에서
를 사용하는 것은 주로 다음 두 가지 기능을 정의하는 telerik RadButton 제어용입니다.

코드 복사

코드는 다음과 같습니다: // 버튼 클릭을 트리거하는 RadButton의 확인 확인 콜백에 사용됩니다. function radcallback(s) {

return Function.createDelegate (s , function(argument) {

if (argument) {
this.click();
}
})
}
// 확인 프롬프트를 추가하는 데 사용됩니다. RadButton
function radconfirm2(textOrFn, title, callback) {
return function(s, e) {
$.jqconfirm(textOrFn, title, callback || radcallback(s)
/ /radconfirm( textOrFn, callback, 280, 50, null, title);
e.set_cancel(true)
}
}


다음과 같이 사용할 수 있습니다. 이:

코드 복사

코드는 다음과 같습니다.

End

자세한 내용은 jQuery UI Dialog 공식 데모를 참조하세요.

http ://jqueryui.com/demos/dialog
.
스크립트 홈 다운로드 주소
http://www.jb51.net/jiaoben/15574.html이 기사의 데모를 다운로드하세요
lwme-jquery-ui-dialog-demo. 7z저자: 囧月
출처: http://lwme.cnblogs.com/