jQuery UI 대화 상자는 친숙한 팝업 대화 상자 구현을 생성합니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 17:54:30

원래의

1391명이 탐색했습니다.

주요 매개변수
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
})

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

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

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