[Javascript] jQuery를 활용한 동적 로딩 이미지 생성

1. 로딩 이미지 동적 생성 함수

function createLoadingBar(msg) {

       

        var winWidth =  120, winHeight = 60;

        var left    = (window.innerWidth - winWidth)/2;

        var top     = (window.innerHeight- winHeight)/2;

        var $div = $("<div id='loadingDiv'></div>");

 

        $div.append("<img src='/img/common/anim/loading.gif' width='80px' height='80px'/>");

       

        if(msg) {

               $div.append("<br/><br/><span style='font-weight:bold;font-size:14px;'>"+msg+"</span>");

        }

 

        $div.css({

               "background-color":"#0fff",           // 배경색 투명

//             "background-color":"#fff",            // 배경색 흰색

               "position":"fixed",

               "top":top,

               "left":left,

               "width":winWidth,

//             "height":winHeight,

               "z-index":"1",                               // 최상위 레이어

               "border-style":"none",

               "text-align":"center"

        }).appendTo('body');

}

2. 페이지 onload시 element에 click 이벤트 연결

// 정렬버튼, 업무탭, 지정클래스(loadingBtn)에 이벤트 연결 ( 버블링 이용한 onclick 처리 )

$(function() {

        $(".thBtn, .listTab, .loadingBtn").on("click",function() {

//             createLoadingBar('처리중입니다...');

               createLoadingBar();

        });

});

3. 연결된 이벤트 해제 함수

function goWorkListSearch(){

              

        setPointerStyle(':button','progress');

        if ( doubleTrans ) return false;

 

        var fDate = $S("pStartDate").value;

        var tDate = $S("pEndDate").value;

        var fInfo = fDate.split("-");

        var tInfo = tDate.split("-");

        var part1st = document.getElementById("part1st").value;

        var frmDate = new Date(parseInt(fInfo[0],10),parseInt(fInfo[1],10),parseInt(fInfo[2],10));

        var toDate  = new Date(parseInt(tInfo[0],10),parseInt(tInfo[1],10),parseInt(tInfo[2],10));

        var betweenDay = ( toDate.getTime() - frmDate.getTime() ) / (1000*60*60*24) + 1;

 

        if(part1st == "_NULL_"){

            alert("<%=UserMessageUtil.getMessage("msg.3010.002", ctx.getUserLocale())%>" );

            clearEvent();

            return false;

        }else if ( betweenDay > 90 ) {

            alert("<%=UserMessageUtil.getMessage("msg.3010.001", ctx.getUserLocale())%>" );

            clearEvent();

            return false;

        } else {

            document.getElementById("ServiceName").value ="S070203010-service"; // 서비스명

            document.getElementById("orderby").value = "HR_AYTI_JOB_RPT_ID DESC";

            var frmSearch = document.getElementById("frmSearch");

            //frmSearch.action  ="/S07020/test/ParameterTest.jsp";

            frmSearch.action ="./S070203010.do";

            frmSearch.submit();

            doubleTrans = true;

            return true;

        }

}

// 연결된 이벤트 해제 ( 버블링 방지 )

function clearEvent(e) {

        var event = e || window.event;

        if(event.stopPropagation) {

               event.stopPropagation();

    }else {

        event.cancelBubble = true;

    }

}