개요
jQuery BlockUI 플러그인을 사용하면 브라우저를 잠그지 않고 AJAX 를 사용할 때 동기 동작을 시뮬레이션할 수 있습니다 [1] . 활성화되면 비활성화될 때까지 해당 페이지(또는 페이지의 일부)에 대한 사용자 활동이 차단됩니다. BlockUI는 DOM 에 요소를 추가하여 사용자 상호 작용을 차단하는 모양과 동작을 모두 제공합니다.
사용법은 매우 간단합니다. 페이지에 대한 사용자 활동을 차단하려면 다음을 수행하세요.
$.blockUI();맞춤 메시지로 차단:
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });맞춤 스타일로 차단:
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff'} });페이지 차단을 해제하려면:
$.unblockUI();기본 설정을 사용하고 모든 Ajax 요청에 대해 UI를 차단하려면 다음과 같이 쉽습니다.
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);[1] 동기XMLHttpRequest 모드 에서 개체를 사용하면 원격 호출이 완료될 때까지 전체 브라우저가 잠깁니다. 이는 일반적으로 바람직한 동작이 아닙니다.
페이지 차단 예
이 페이지에서는 페이지를 차단하는 여러 가지 방법을 보여줍니다. 아래의 각 버튼은 blockUI를 활성화한 다음 서버에 원격 호출을 수행합니다.
<script type="text/javascript">
// unblock when ajax activity stops
$(document).ajaxStop($.unblockUI);
function test() {
$.ajax({ url: 'wait.php', cache: false });
}
$(document).ready(function() {
$('#pageDemo1').click(function() {
$.blockUI();
test();
});
$('#pageDemo2').click(function() {
$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' });
test();
});
$('#pageDemo3').click(function() {
$.blockUI({ css: { backgroundColor: '#f00', color: '#fff' } });
test();
});
$('#pageDemo4').click(function() {
$.blockUI({ message: $('#domMessage') });
test();
});
});
</script>
...
<div id="domMessage" style="display:none;">
<h1>We are processing your request. Please be patient.</h1>
</div>
요소 차단 예
이 페이지에서는 전체 페이지가 아닌 페이지에서 선택한 요소를 차단하는 방법을 보여줍니다. 아래 버튼은 그 아래에 있는 경계 영역에 대한 액세스를 차단/차단 해제합니다.
<script type="text/javascript">
$(document).ready(function() {
$('#blockButton').click(function() {
$('div.test').block({ message: null });
});
$('#blockButton2').click(function() {
$('div.test').block({
message: '<h1>Processing</h1>',
css: { border: '3px solid #a00' }
});
});
$('#unblockButton').click(function() {
$('div.test').unblock();
});
$('a.test').click(function() {
alert('link clicked');
return false;
});
});
</script>
간단한 모달 대화 상자 예
이 페이지에서는 간단한 모달 대화 상자를 표시하는 방법을 보여줍니다. 아래 버튼은 blockUI 사용자 정의 메시지와 함께 호출됩니다. 사용자 응답(예 또는 아니오)에 따라 UI를 차단한 상태에서 Ajax 호출이 수행됩니다.
<script type="text/javascript">
$(document).ready(function() {
$('#test').click(function() {
$.blockUI({ message: $('#question'), css: { width: '275px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>
...
<input id="test" type="submit" value="Show Dialog" />
...
<div id="question" style="display:none; cursor: default">
<h1>Would you like to contine?.</h1>
<input type="button" id="yes" value="Yes" />
<input type="button" id="no" value="No" />
</div>
모든 기능을 갖춘 모달 대화 상자 지원을 보려면 Eric Martin의 Simple Modal 또는 Brice Burgess의 jqModal을 확인하세요 .
옵션
BlockUI의 기본 옵션은 (정확히) 다음과 같습니다:
// override these in your code to change the default behavior and style
$.blockUI.defaults = {
// message displayed when blocking (use null for no message)
message: '<h1>Please wait...</h1>',
title: null, // title string; only used when theme == true
draggable: true, // only used when theme == true (requires jquery-ui.js to be loaded)
theme: false, // set to true to use with jQuery UI themes
// styles for the message when blocking; if you wish to disable
// these and use an external stylesheet then do this in your code:
// $.blockUI.defaults.css = {};
css: {
padding: 0,
margin: 0,
width: '30%',
top: '40%',
left: '35%',
textAlign: 'center',
color: '#000',
border: '3px solid #aaa',
backgroundColor:'#fff',
cursor: 'wait'
},
// minimal style set used when themes are used
themedCSS: {
width: '30%',
top: '40%',
left: '35%'
},
// styles for the overlay
overlayCSS: {
backgroundColor: '#000',
opacity: 0.6,
cursor: 'wait'
},
// style to replace wait cursor before unblocking to correct issue
// of lingering wait cursor
cursorReset: 'default',
// styles applied when using $.growlUI
growlCSS: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
opacity: 0.6,
cursor: null,
color: '#fff',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px'
},
// IE issues: 'about:blank' fails on HTTPS and javascript:false is s-l-o-w
// (hat tip to Jorge H. N. de Vasconcelos)
iframeSrc: /^https/i.test(window.location.href || '') ? 'javascript:false' : 'about:blank',
// force usage of iframe in non-IE browsers (handy for blocking applets)
forceIframe: false,
// z-index for the blocking overlay
baseZ: 1000,
// set these to true to have the message automatically centered
centerX: true, // <-- only effects element blocking (page block controlled via css above)
centerY: true,
// allow body element to be stetched in ie6; this makes blocking look better
// on "short" pages. disable if you wish to prevent changes to the body height
allowBodyStretch: true,
// enable if you want key and mouse events to be disabled for content that is blocked
bindEvents: true,
// be default blockUI will supress tab navigation from leaving blocking content
// (if bindEvents is true)
constrainTabKey: true,
// fadeIn time in millis; set to 0 to disable fadeIn on block
fadeIn: 200,
// fadeOut time in millis; set to 0 to disable fadeOut on unblock
fadeOut: 400,
// time in millis to wait before auto-unblocking; set to 0 to disable auto-unblock
timeout: 0,
// disable if you don't want to show the overlay
showOverlay: true,
// if true, focus will be placed in the first available input field when
// page blocking
focusInput: true,
// suppresses the use of overlay styles on FF/Linux (due to performance issues with opacity)
// no longer needed in 2012
// applyPlatformOpacityRules: true,
// callback method invoked when fadeIn has completed and blocking message is visible
onBlock: null,
// callback method invoked when unblocking has completed; the callback is
// passed the element that has been unblocked (which is the window object for page
// blocks) and the options that were passed to the unblock call:
// onUnblock(element, options)
onUnblock: null,
// don't ask; if you really must know: http://groups.google.com/group/jquery-en/browse_thread/thread/36640a8730503595/2f6a79a77a78e493#2f6a79a77a78e493
quirksmodeOffsetHack: 4,
// class name of the message block
blockMsgClass: 'blockMsg',
// if it is already blocked, then ignore it (don't unblock and reblock)
ignoreIfBlocked: false
};
blockUI 옵션을 변경하는 것은 간단하며 다음 두 가지 방법 중 하나로 수행할 수 있습니다.
- $.blockUI.defaults전역적으로 개체 의 값을 직접 재정의하여
- 로컬에서 옵션 개체를 blockUI (또는 block) 함수에 전달합니다.
전역 재정의
간단히 다른 값을 선언하여 기본 옵션을 변경할 수 있습니다. 예를 들어:
// change message border
$.blockUI.defaults.css.border = '5px solid red';
// make fadeOut effect shorter
$.blockUI.defaults.fadeOut = 200;
로컬 재정의
로컬 재정의 는 개체를 blockUI, 또는 함수에 전달하여 수행됩니다. 전역 개체에서 사용할 수 있는 것과 동일한 옵션을 로컬 옵션 개체에도 사용할 수 있습니다 . 예를 들어: unblockUIblockunblock
// change message border
$.blockUI({ css: { border: '5px solid red'} });
...
// make fadeOut effect shorter
$.unblockUI({ fadeOut: 200 });
...
// use a different message
$.blockUI({ message: 'Hold on!' });
...
// use a different message
$('#myDiv').block({ message: 'Processing...' });