Form에서 Submit시에 서버에 전송중입니다 애니메이션 띄우고 진행하는 모듈
Html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="" />
<script type="text/javascript" src="" />
<script type="text/javascript">
$(document).ready(function (event){
setTimeout(timeout.1800000);//30분
$('btnSending').click(function (event){
sending();
});
});
function sending(){
ajaxindicatorStart('서버에 요청중입니다.');
resetTimeout();
document.sendFrm.action="send";
document.sendFrm.submit();
}
function resutTimeout(){
setTimeout(timeout.1800000);//30분
}
function timeout(){
location.href="/xxx/logout";
}
</script>
</head>
<body>
<form name="sendFrm" method="POST" ENCTYPE="multipart/form-data">
<input type="button" id="btnSending" class="" value="발송" />
<input type="reset" id="" class="" ="발송" />
</form>
</body>
</html>
Javascript
function ajaxindicatorstart(text) {
if(getInternetExplorerVersion() == 7) {
return ;
}
if(jQuery('body').find('#resultLoading').attr('id') != 'resultLoading'){
jQuery('body').append('<div id="resultLoading" style="display:none"><div>'+text+'</div><div><img src="'+contextPath+'/resources/image/ajax-loader.gif"></div><div class="bg"></div></div>');
}
jQuery('#resultLoading').css({
'width':'100%',
'height':'100%',
'position':'fixed',
'z-index':'10000000',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto'
});
jQuery('#resultLoading .bg').css({
'background':'#000000',
'opacity':'0.7',
'width':'100%',
'height':'100%',
'position':'absolute',
'top':'0'
});
jQuery('#resultLoading>div:first').css({
'width': '250px',
'height':'75px',
'text-align': 'center',
'position': 'fixed',
'top':'0',
'left':'0',
'right':'0',
'bottom':'0',
'margin':'auto',
'font-size':'16px',
'z-index':'10',
'color':'#ffffff'
});
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeIn(300);
jQuery('body').css('cursor', 'wait');
}
function ajaxindicatorstop() {
if(getInternetExplorerVersion() == 7) {
return ;
}
jQuery('#resultLoading .bg').height('100%');
jQuery('#resultLoading').fadeOut(300);
jQuery('body').css('cursor', 'default');
}
'프론트엔드 > 그래픽디자인_퍼블리싱' 카테고리의 다른 글
| JQUERY SELECT에서 선택하자 마자 바로 액션발생시 처리하는 루틴 (0) | 2017.11.05 |
|---|---|
| html에서 특수기호 (0) | 2017.05.21 |
| 자바스크립트에서 <style>에 CSS 구문 넣어줄때 예제 (0) | 2017.05.02 |
| photoshop 관련 정리 (0) | 2017.01.22 |
| 웹 프론드 퍼블리싱 스터디 참여중 (0) | 2016.06.26 |