728x90
개요
Ajax 통신중에 프로그레스바 마스크를 호출하여 사용자의 조작을 막고 처리중임을 알릴 필요가 있다.
빠른 길잡이
jQuery UI 이용
html로 프로그레스바를 준비한다.
스타일
<style>
#progressbar {
margin-top: 20px;
}
.progress-label {
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
/* Dialog의 우상단 닫기버튼[x]를 숨기는 설정. */
.ui-dialog-titlebar-close {
display: none;
}
</style>
html
<!-- Progressbar Dialog -->
<div id="dialog" title="Progressbar Example" style="display: none;">
<div class="progress-label">Starting...</div>
<div id="progressbar"></div>
</div>
beforeSend에서 jQuery UI 프로그레스바를 노출시킨한다.
(*[2022-11-14] modal 속성이 누락되었어서 추가함.)
beforeSend : function() {
var progressbar = $("#progressbar");
progressbar.progressbar({
value: false,
});
//progressbar.progressbar("value", 0);
$('#dialog').dialog({
modal: true
});
}
complete에서 jQuery 프로그레스바를 비노출시킨다.
complete/*always*/ : function() {
$('#dialog').dialog('close');
}
EasyUI 이용
beforeSend에서 EasyUI 프로그레스바를 노출시킨한다.
beforeSend : function(jqXHR, settings) {
$.messager.progress({
title:'요청을 처리하는 중입니다.',
msg:'처리가 끝날 때까지 잠시만 기다려주세요...'
});
}
complete에서 EasyUI 프로그레스바를 비노출시킨다.
complete/*always*/ : function() {
$.messager.progress('close');
}
해설
jQuery Ajax에서 beforeSend는 요청 전 항상 실행된다.
또한 complete는 응답을 받고 success와 error 어느 쪽이더라도 그 후에 실행된다.
반응형
'컴 이것저것 > Java Script' 카테고리의 다른 글
JavaScript에 StringUtils를 만들어보자 (0) | 2023.01.12 |
---|---|
EasyUI - datagrid 내에 tooltip 띄우기 (0) | 2022.11.15 |
EasyUI - tabs/tab 현재 선택된 인덱스|id 확인하기 (0) | 2022.11.14 |
EasyUI -options : Properties 조회 (0) | 2022.11.10 |
정규표현식 시각화 테스트 regex101.com (0) | 2022.07.18 |